如何在SharePoint的customCardProps中覆盖硬编码user-select:none以允许选中文本？

方案1：嵌套HTML元素并强制样式优先级 #

直接在customCardProps的内容里给每个文本元素嵌套<span>或<div>，用!important强制提升user-select样式的优先级，覆盖SharePoint的硬编码设置：

"customCardProps": {
  "formatter": {
    "elmType": "div",
    "children": [
      {
        "elmType": "table",
        "children": [
          {
            "elmType": "tr",
            "children": [
              {
                "elmType": "td",
                "style": {
                  "user-select": "text !important",
                  "-webkit-user-select": "text !important"
                },
                "txtContent": "[$ColumnName1]"
              },
              {
                "elmType": "td",
                "style": {
                  "user-select": "text !important",
                  "-webkit-user-select": "text !important"
                },
                "txtContent": "[$ColumnName2]"
              }
            ]
          }
        ]
      }
    ]
  }
}

如果是表格结构，需要给每个<td>/<th>都添加上述样式。

方案2：注入JavaScript动态修改样式 #

如果方案1无效，可通过页面脚本监听自定义卡片的加载事件，动态修改样式：

1. 在SharePoint页面添加「脚本编辑器」Web部件（企业级场景推荐用SPFx扩展）
2. 插入以下代码：

// 监听DOM变化，捕获自定义卡片
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    const customCards = document.querySelectorAll('.ms-customCard');
    customCards.forEach(card => {
      // 设置卡片本身及所有子元素可选中
      card.style.userSelect = 'text';
      card.style.webkitUserSelect = 'text';
      card.querySelectorAll('*').forEach(el => {
        el.style.userSelect = 'text';
        el.style.webkitUserSelect = 'text';
      });
    });
  });
});

// 启动监听
observer.observe(document.body, { childList: true, subtree: true });

脚本会在卡片显示时自动覆盖硬编码的user-select:none。

方案3：无代码替代——用Power Apps自定义卡片 #

若不想编写代码，可将原JSON列格式替换为Power Apps自定义卡片：在Power Apps编辑器中，将文本控件的「允许选择」属性设为开启，完全规避SharePoint的样式限制。

内容的提问来源于stack exchange，提问作者user1063287