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

您在这里所做的就是更改整个主题。有多种方法可以更改特定元素的样式，或更改应用程序中特定元素的所有外观。

如果您要更改一个按钮的颜色，则可以使用替代类，如下所示：

diff

如果您想覆盖所有按钮，则可以使用自定义主题：

const buttonStyle = (theme) => ({
    root: {
        background: 'red'
    },
});

const StyledButton = (props) => withStyles(styles)(
    <Button classes={{root}}/>
);

Answer 2

您可以使用替代项自定义组件的样式：

const theme = createMuiTheme({
    palette: {
        primary: {
            main: '#ce93d8', // main color
        },
        secondary: {
            main: '#1d83c6',
        },
    },
    overrides: {
        MuiButton: { // Name of the component ⚛️ / style sheet
            root: { // Name of the rule
                background: '#DDB61A', // Some CSS
            },
        },
    },
});

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

Answer 3

在您的调色板中创建新的颜色变体：

 shm_add_upstream::shm_add_node(host:port)failed while logging request

shm_add_node::ngx_slab_alloc_locked() failed: used_size[6313245], used_node[2542] while logging request, 

shm_add_server() failed while logging request

然后：

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

如何在材质用户界面中覆盖CSS？

3 个答案: