React中如何用自定义CSS为单个Material UI TextField设置专属样式

方法1：直接使用封装的自定义组件（兼容MUI v4/v5） #

你当前写的withStyles代码本身就已经生成了独立的自定义TextField组件，只要仅在当前搜索栏的位置使用这个自定义组件，其余场景还是用MUI原生的TextField，就完全不会影响其他组件，示例用法：

// 封装仅用于搜索栏的自定义TextField组件
const StyledSearchTextField = withStyles({
  root: {
    '& .MuiOutlinedInput-root': {
      '& fieldset': {
        borderColor: 'white',
      },
      '&:hover fieldset': {
        borderColor: '#356E44',
      },
      '&.Mui-focused fieldset': {
        borderColor: 'gray',
      },
    },
  },
})(TextField);

// 仅在搜索栏位置调用自定义组件，其他位置仍使用原生TextField
function SearchBar() {
  return <StyledSearchTextField label="搜索" variant="outlined" />
}

注意：你原有代码中组件名拼写有误（TextFiledStyle 应为 TextFieldStyle），修正后即可正常使用

方法2：使用sx属性（推荐，仅MUI v5及以上支持） #

MUI v5提供的sx属性是内置的行内样式方案，优先级足够覆盖默认样式，且只会作用于当前绑定的单个组件，不需要额外封装组件，写法更简洁：

function SearchBar() {
  return (
    <TextField
      label="搜索"
      variant="outlined"
      sx={{
        '& .MuiOutlinedInput-root': {
          '& fieldset': {
            borderColor: 'white',
          },
          '&:hover fieldset': {
            borderColor: '#356E44',
          },
          '&.Mui-focused fieldset': {
            borderColor: 'gray',
          },
        }
      }}
    />
  )
}

方法3：自定义className配合外部CSS #

如果更习惯用外部CSS文件，可以给当前搜索栏的TextField加一个唯一的自定义类名，再写对应样式即可：

// 组件内加唯一类名
<TextField className="search-only-text-field" label="搜索" variant="outlined" />

/* 外部CSS文件 */
.search-only-text-field .MuiOutlinedInput-root fieldset {
  border-color: white;
}
.search-only-text-field .MuiOutlinedInput-root:hover fieldset {
  border-color: #356E44;
}
.search-only-text-field .MuiOutlinedInput-root.Mui-focused fieldset {
  border-color: gray;
}

样式不生效原因说明 #

MUI组件的默认样式优先级较高，普通的类选择器、行内样式会被内置样式覆盖，以上三种方案的样式优先级都足够覆盖默认规则，且只会作用于指定的单个组件。

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