When working with material UI and reactjs, I encountered an issue while trying to override the button color without affecting the tab colors (see screenshot). How can I achieve this using themes in material UI? Code:
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>
Another approach that was attempted:
const theme = createMuiTheme({
palette: {
myBtn: {
main: '#DDB61A',
}
}
});
<MuiThemeProvider theme={theme}>
<Button variant="contained" color="myBtn" fullWidth={true}>
Buy/Login
</Button>
</MuiThemeProvider>
Screenshot: