Material UI主题调色板主色未应用于按钮背景问题求助

你遇到的问题是因为Material UI的Button组件默认使用text变体，这个变体的设计逻辑就是背景透明，仅文字应用主色。而你对比的在线主题工具里默认展示的是contained变体，所以会显示主色背景。

解决方法有两种：

• 显式指定Button的变体为contained

<Button variant="contained">Import</Button>

• 修改主题，将Button的默认变体改为contained

const theme = createTheme({
  palette: {
    primary: {
      main: '#00629A'
    },
  },
  components: {
    MuiButton: {
      defaultProps: {
        variant: 'contained'
      }
    }
  }
});

完成以上任一设置后，按钮就会应用primary主色作为背景，和在线主题工具的效果一致。

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