创建主题时，如何在整个应用程序中自定义 material-ui V1 组件？

Question

在material-ui v0 中，使用const muiThemeV0 = getMuiTheme(theme); 创建主题时 我可以简单地根据这个文件为每个组件的 themeOptions 添加一个属性： https://github.com/mui-org/material-ui/blob/master/src/styles/getMuiTheme.js（目前写这个问题时在master分支上），不仅可以自定义颜色，还可以自定义主题边框半径等，以及特定组件的大小和颜色。 例如：

const theme = {
  slider: {
    selectionColor:  colors.primary1Color,
    handleFillColor: colors.primary1Color,
    trackSize:       6,
  }
}

我尝试浏览https://material-ui-next.com/customization/overrides/ 文档，但是当我想使用const muiThemeV1 = createMuiTheme(theme); 时，在源代码（如 MUI-v0）中看不到示例和/或选项列表 在 v1 中有这种定制的文档吗？ 这甚至可能吗？

Answer 1

在 v1 中，您可以使用主题 overrides 属性来自定义特定组件类型的样式。此功能无需为单个组件提供主题选项，而是允许您自定义 material-ui 注入 DOM 的每种样式。

您可以在网站上找到每个组件的 CSS 类列表（在组件 API 部分）。

以下示例自定义Button组件的外观

const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      // override root styles for the button component.
      root: {
        // Name of the rule
        background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
        borderRadius: 3,
        color: 'white',
        height: 48,
        padding: '0 30px',
        marginRight: 32,
      },
      // Custom styles for the raised button variant
      raised: {
        borderRadius: 50,
        color: 'white',
        // Custom hover styles for raised button 
        '&:hover': {
          boxShadow: shadows[4],
        },
        // Custom active styles for raised button
        '&:active': {
          boxShadow: `${shadows[24]} !important`,
        },
      },
    },
  }
});

Live example on code sandbox

Documentation on theme overrides