Material-UI v4生产与开发环境Select组件样式差异问题求助

解决方案 #

1. 直接覆盖异常伪元素和样式

通过高优先级选择器命中目标元素，直接消除异常样式：

/* 隐藏多余的::before伪元素 */
.MuiInputBase-root::before {
  display: none !important;
  content: unset !important;
}
/* 覆盖异常黑色背景 */
.MuiSelect-root .MuiInputBase-root {
  background-color: transparent !important;
}

如果使用CSS Modules、styled-components等样式方案，可以直接绑定到你自定义的输入框类名下，不会产生全局样式污染。

2. 通过MUI主题全局覆盖默认样式

这是MUI官方推荐的方案，不需要加!important即可生效，在项目根入口配置主题即可：

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

const customTheme = createTheme({
  overrides: {
    MuiInputBase: {
      root: {
        // 覆盖黑色背景
        backgroundColor: 'transparent',
        // 禁用默认生成的::before伪元素
        '&::before': {
          display: 'none'
        }
      }
    }
  }
});

// 用ThemeProvider包裹你的根组件
function App() {
  return <ThemeProvider theme={customTheme}>{/* 你的项目代码 */}</ThemeProvider>
}

3. 排查构建依赖问题解决根因

生产和开发环境样式不一致大概率是依赖版本冲突导致的重复样式注入：

• 执行npm ls @material-ui/core（yarn用户执行yarn list @material-ui/core）检查是否存在多个版本的MUI依赖，统一版本后重新安装依赖构建即可解决。
• 检查是否同时安装了@material-ui/styles和@emotion/react等多套样式方案，保留一套即可避免样式重复注入。

4. 调整样式插入优先级

如果需要完全控制样式优先级，可以在根入口配置MUI的StylesProvider，让自定义样式插入到MUI默认样式之后，自动获得更高优先级：

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

function App() {
  return <StylesProvider injectFirst>{/* 你的项目代码 */}</StylesProvider>
}

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