Question

使用const muiThemeV0 = getMuiTheme(theme);创建主题时，在material-ui v0中

我可以简单地根据这个文件为每个组件的themeOptions添加一个属性： https://github.com/mui-org/material-ui/blob/master/src/styles/getMuiTheme.js（目前在编写此问题时位于主分支上），并且不仅可以自定义颜色，还可以自定义主题border-radius等，以及特定的组件大小和颜色。例如：

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属性来自定义特定组件类型的样式。此功能不是为单个组件提供主题选项，而是允许您自定义材料-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

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

1 个答案: