我正在使用reactjs的材质UI。我想覆盖按钮颜色,但在我的情况下,它也会改变选项卡颜色(见截图)我如何才能覆盖按钮颜色,在材质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>
截图:
4条答案
按热度按时间k5hmc34c1#
您可以使用取代自订元件的型式:
检查此页面:https://material-ui.com/customization/overrides/
xoshrz7s2#
您在这里所做的就是更改整个主题。有很多方法可以更改应用中特定元素的样式或特定元素的所有外观。
在您的情况下,如果您尝试变更一个按钮的颜色,您可以使用覆写类别,如下所示:
如果要覆盖所有按钮,可以使用自定义主题:
ryevplcw3#
在调色板中创建新的颜色变体:
然后:
0tdrvxhp4#
如果有人还涉及到这个问题:MUI v5全局覆盖组件的解决方案记录在以下位置:全局样式替代