material-ui - 如何全局覆盖 Material-UI 组件的变体、颜色、样式等？

Question

不要到处这样做:

<Button variant="contained" color="primary" 
  style={{textTransform: "none"}}    
>
  Description
</Button>

我只想写:

<Button>
  Description
</Button>

我可以使用主题覆盖来做到这一点吗？那会是什么样子？

请注意，我正在尝试覆盖 Material-UI 属性和 CSS 样式。我想在全局范围内执行此操作(即不在任何地方使用 withStyles() 东西)。

或者这只能通过定义某种新的 AppButton 组件来完成？

当前使用ma​​terial-ui 3.2.2

Answer 1

您可以通过主题的全局覆盖来实现此目的。文档在这里 https://material-ui.com/customization/themes/#customizing-all-instances-of-a-component-type

这样做仍然允许您在每个组件的基础上覆盖变体。

const theme = createMuiTheme({
  props: {
    // Name of the component ⚛️
    MuiButton: {
      // The properties to apply
      variant: 'contained'
    },
  },
});