如何在创建主题时全局自定义Material-UI V1组件？

嘿，正好我对Material-UI V1的主题定制挺熟悉的，来给你捋捋怎么操作！

在V1里，主题系统和V0有不少变化，原来的getMuiTheme被createMuiTheme替代了，而且定制方式更结构化。你可以通过几个核心字段来实现全局组件的自定义，不管是颜色、尺寸还是圆角这类样式，甚至组件的默认属性都能统一设置。

1. 全局基础样式配置（比如圆角、全局色调） #

如果要统一设置所有组件的边框圆角、主色调这类基础样式，直接在主题的shape、palette字段里定义就行：

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

const theme = createMuiTheme({
  // 全局边框圆角，所有带圆角的组件都会继承这个值
  shape: {
    borderRadius: 8,
  },
  // 全局调色板，主色、次色、错误色都在这定义
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
  },
});

2. 针对特定组件的样式定制 #

如果你想给某个组件单独定制样式（比如你之前在V0里改Slider的选中颜色、滑块尺寸），V1里用overrides字段来实现。这个字段允许你覆盖组件内部的CSS类样式：

const theme = createMuiTheme({
  overrides: {
    // 定制Slider组件
    MuiSlider: {
      // 对应V0里的selectionColor
      selection: {
        backgroundColor: '#2ecc71',
      },
      // 定制滑块的样式
      thumb: {
        backgroundColor: '#ffffff',
        border: '2px solid #2ecc71',
        width: 18,
        height: 18,
      },
    },
    // 再举个例子，定制Button的默认样式
    MuiButton: {
      root: {
        fontWeight: 600,
        textTransform: 'none', // 取消默认的大写文本转换
      },
    },
  },
});

3. 全局设置组件的默认属性 #

除了样式，你还能全局设置组件的默认Props，比如让所有Button默认都是填充样式，所有TextField默认是轮廓样式：

const theme = createMuiTheme({
  props: {
    MuiButton: {
      variant: 'contained',
    },
    MuiTextField: {
      variant: 'outlined',
    },
  },
});

最后别忘了应用主题 #

不管你怎么定制，都需要用ThemeProvider把主题包裹到你的根组件上，这样所有子组件才能继承主题配置：

import { ThemeProvider } from '@material-ui/core/styles';
import App from './App';

function Root() {
  return (
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  );
}

总的来说，V1的主题定制比V0更模块化，overrides负责样式覆盖，props负责默认属性，基础字段负责全局统一风格，用起来更清晰灵活。

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