Backstage中如何用createTheme覆盖withStyles定义的Material-UI组件样式

AI 小北

2026-10-7

解决方法

你可以通过`createTheme`的`components`配置项全局覆盖对应组件的样式，针对你这个场景有两种覆盖方式，按需选择即可：

方式1：全局覆盖所有InputBase组件样式

直接修改MuiInputBase的内置样式规则，会作用于所有基于InputBase封装的组件，适配你要修改的BootstrapInput组件：

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

const myTheme = createTheme({
  // 你原有主题的其他配置
  components: {
    MuiInputBase: {
      styleOverrides: {
        // 对应原withStyles中的root规则
        root: {
          'label + &': {
            marginTop: theme.spacing(2), // 替换为你需要的数值
          },
        },
        // 对应原withStyles中的input规则，也就是你要调整的WithStyles(ForwardRef(InputBase))-input-xxx类的样式
        input: {
          // 这里写你要覆盖的样式，和原规则写法完全一致
          borderRadius: 8,
          borderColor: '#1976d2',
          fontFamily: '你的自定义字体',
          '&:focus': {
            boxShadow: '0 0 0 2px rgb(25 118 210 / 20%)',
          },
          // 若样式被原有规则覆盖不生效，添加&&提升权重即可：
          // '&&': {
          //   borderRadius: 8,
          // }
        },
      },
    },
  },
});

方式2：仅覆盖Select组件内的InputBase样式

如果不想影响全局其他InputBase组件，只想修改Select下的样式，针对性更强：

const myTheme = createTheme({
  components: {
    MuiSelect: {
      styleOverrides: {
        root: {
          // 仅命中Select组件下的InputBase输入框
          '& .MuiInputBase-input': {
            padding: '8px 24px 8px 12px',
            // 其他要覆盖的样式
          }
        }
      }
    }
  }
})