如何移除Fluent UI中TextField的选中高亮效果？

问题原因 #

你之前的CSS代码无效，是因为Fluent UI的TextField组件对原生input做了封装，聚焦时的高亮效果并非来自原生input的outline，而是组件自身的自定义元素（如带类名的边框容器、伪元素）实现的，直接针对原生input的样式无法覆盖组件的内置样式。

解决方案 #

方法1：使用组件内置styles属性（推荐，无全局样式污染）

通过Fluent UI组件提供的styles prop，精准覆盖聚焦状态下的样式：

import { TextField } from '@fluentui/react';

function App() {
  return (
    <div className="App">
      <TextField
        label="Standard TextField"
        styles={{
          // 覆盖输入框本身的聚焦样式
          field: {
            '&:focus': {
              outline: 'none',
              borderColor: '#eaeaea', // 匹配非聚焦时的边框颜色
              boxShadow: 'none'
            }
          },
          // 移除底部的聚焦高亮线（如果存在）
          border: {
            '&:after': {
              display: 'none'
            }
          }
        }}
      />
    </div>
  );
}

export default App;

方法2：全局CSS（需精准匹配组件类名）

如果你需要全局移除所有TextField的聚焦高亮，可以使用组件生成的类名来定位：

/* 覆盖输入框聚焦时的边框和阴影 */
.ms-TextField-field:focus {
  outline: none !important;
  border-color: #ccc !important;
  box-shadow: none !important;
}

/* 移除底部的聚焦伪元素高亮 */
.ms-TextField-border:after {
  display: none !important;
}

注意：使用!important是为了确保样式优先级高于Fluent UI的内置样式，若你使用CSS模块或有更高优先级的选择器，可省略该声明。

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