如何覆盖 Material UI 中的 CSS？

Question

我正在使用 Material UI 和 ReactJS。我想覆盖按钮颜色，但在我的情况下，它也会更改选项卡颜色（参见屏幕截图）如何使用材质 UI 中的主题仅覆盖按钮颜色？代码：

const theme = createMuiTheme({
    palette: {
        primary: {
            main: '#DDB61A',
        },
        secondary: {
            main: '#1d83c6',
        },
    },
});


<MuiThemeProvider theme={theme}>
    <AppBar position="static">
           <Tabs value={value} onChange={this.handleTabChange}>
           <Tab label="USDT" />
           <Tab label="BTC" />
           <Tab label="ETH" />
           </Tabs>
        </AppBar>

    {value === 0 && <TabContainer>
    <Button variant="contained" color="primary" fullWidth={true}>
              Buy/Login
         </Button>
    </TabContainer>}
</MuiThemeProvider>

第二种方法也不起作用：

    const theme = createMuiTheme({
        palette: {
            myBtn: {
                main: '#DDB61A',
            }
        }
    });

<MuiThemeProvider theme={theme}>    
    <Button variant="contained" color="myBtn" fullWidth={true}>
          Buy/Login
    </Button>
</MuiThemeProvider>

截屏：

Answer 1

您可以使用覆盖来自定义组件的样式：

\n\n

const theme = createMuiTheme({\n    palette: {\n        primary: {\n            main: \'#ce93d8\', // main color\n        },\n        secondary: {\n            main: \'#1d83c6\',\n        },\n    },\n    overrides: {\n        MuiButton: { // Name of the component \xe2\x9a\x9b\xef\xb8\x8f / style sheet\n            root: { // Name of the rule\n                background: \'#DDB61A\', // Some CSS\n            },\n        },\n    },\n});\n

\n\n

检查此页面： https: //material-ui.com/customization/overrides/

\n