To modify the appearance of a button, focus on changing its default and hover states rather than the active state. The code snippet below demonstrates setting the button text color to white (#fff) and the background color to a shade of blue (#3c52b2), which then switches when hovered over.
If you are unsure about how to implement these style updates or override default styles, refer to the following example utilizing makeStyles(). The concept remains similar with the use of the withStyles() HOC.
const {
AppBar,
Button,
makeStyles,
Toolbar,
Typography,
} = MaterialUI
const useStyles = makeStyles({
flexGrow: {
flex: '1',
},
button: {
backgroundColor: '#3c52b2',
color: '#fff',
'&:hover': {
backgroundColor: '#fff',
color: '#3c52b2',
},
}})
function AppBarWithButtons() {
const classes = useStyles()
return (
<AppBar>
<Toolbar>
<Typography>
YourApp
</Typography>
<div className={classes.flexGrow} />
<Button className={classes.button}>
Button 1
</Button>
<Button className={classes.button}>
Button 2
</Button>
</Toolbar>
</AppBar>
);
};
ReactDOM.render(
<React.StrictMode>
<AppBarWithButtons />
</React.StrictMode>,
document.getElementById("root")
)
<div id="root"></div>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js"></script>
An alternative approach is to create a new styled button component:
const StyledButton = withStyles({
root: {
backgroundColor: '#3c52b2',
color: '#fff',
'&:hover': {
backgroundColor: '#fff',
color: '#3c52b2',
},
}})(Button);
const {
AppBar,
Button,
Toolbar,
Typography,
withStyles
} = MaterialUI
const StyledButton = withStyles({
root: {
backgroundColor: '#3c52b2',
color: '#fff',
'&:hover': {
backgroundColor: '#fff',
color: '#3c52b2',
},
}})(Button);
function AppBarWithButtons() {
return (
<AppBar>
<Toolbar>
<Typography>
YourApp
</Typography>
<div style={{flex: '1'}} />
<StyledButton>
Button 1
</StyledButton>
<StyledButton>
Button 2
</StyledButton>
</Toolbar>
</AppBar>
);
};
ReactDOM.render(
<React.StrictMode>
<AppBarWithButtons />
</React.StrictMode>,
document.getElementById("root")
)
<div id="root"></div>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js"></script>