Material-UI的ThemeProvider全局覆盖样式而非仅作用于包裹组件如何解决

针对你需要修改单个Select样式、兼容类组件、不影响其他组件的需求，有两种成熟可行的方案：

方案1：使用withStyles HOC（更推荐） #

这是单组件定制样式的最优解，完全不会影响其他组件，天然支持类组件。
实现步骤：

1. 导入依赖

import { withStyles } from '@material-ui/core/styles';
import Select from '@material-ui/core/Select';

2. 定义自定义样式，可覆盖Select所有内置节点的样式：

const customSelectStyles = {
  // 输入框根节点样式
  root: {
    border: '1px solid #1890ff',
    borderRadius: 4,
  },
  // 下拉箭头图标样式
  icon: {
    color: '#1890ff',
  },
  // 下拉菜单容器样式
  menuPaper: {
    boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
  },
  // 选中内容样式
  select: {
    padding: '8px 12px',
  }
};

3. 生成自定义Select组件，在类组件中直接使用即可：

const CustomSelect = withStyles(customSelectStyles)(Select);

// 你的类组件中使用示例
class YourComponent extends React.Component {
  render() {
    return (
      <div>
        {/* 原有默认Select，样式不受任何影响 */}
        <Select label="默认选择器" />
        {/* 自定义样式的Select，仅该组件生效 */}
        <CustomSelect label="自定义选择器" />
      </div>
    )
  }
}

方案2：正确使用嵌套ThemeProvider实现局部生效 #

如果你坚持使用主题配置的方式，只要调整ThemeProvider的位置和主题生成逻辑，即可实现仅作用于包裹的子组件：

1. 首先用withTheme HOC包裹你的类组件，拿到全局主题实例，避免局部主题覆盖全局配置
2. 仅将ThemeProvider包裹在需要修改的单个Select外层，不要放在全局根节点
3. 生成局部主题时继承全局主题，仅覆盖需要修改的配置
   实现示例：

import { withTheme, createTheme, ThemeProvider } from '@material-ui/core/styles';
import Select from '@material-ui/core/Select';

class YourComponent extends React.Component {
  render() {
    // 继承全局主题，仅修改Select的相关配置
    const localTheme = createTheme({
      components: {
        MuiSelect: {
          styleOverrides: {
            root: {
              border: '1px solid #1890ff',
              borderRadius: 4,
            }
          }
        }
      }
    }, this.props.theme); // 传入全局主题做合并，避免全局样式丢失

    return (
      <div>
        {/* 原有默认Select，样式不受任何影响 */}
        <Select label="默认选择器" />
        {/* 仅该Select被ThemeProvider包裹，仅它应用自定义主题 */}
        <ThemeProvider theme={localTheme}>
          <Select label="自定义选择器" />
        </ThemeProvider>
      </div>
    )
  }
}

// 用withTheme包裹组件，props中会注入全局theme实例
export default withTheme(YourComponent);

常见错误说明：你之前遇到ThemeProvider全局生效的问题，是因为将ThemeProvider放在了所有Select的公共父节点，只需要将它下移到目标组件外层即可限定作用域。

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