reactjs - 创建主题时如何在整个应用程序中自定义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 (目前在编写这个问题时在主分支上)，并且不仅可以自定义颜色，还可以自定义主题边框半径等，以及特定组件的大小和颜色。例如:

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 注入(inject)到 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