我创建了一个Appbar带有 3 个按钮的按钮，但是当我将鼠标悬停在这些按钮上时，我想更改颜色。背景颜色是#3c52b2，文本颜色是#fff，当我悬停在按钮上时，我希望背景颜色和文本颜色交换。我已经尝试了下面的代码，但仍然无法正常工作。
Button: {
'&:hover': {
backgroundColor: '#ffffff',
boxShadow: 'none',
},
'&:active': {
boxShadow: 'none',
backgroundColor: '#3c52b2',
},
},
您可能不想更改按钮的:active状态，而是更改默认值和:hover状态。下面的设置按钮color来#fff和backgroundColor到#3c52b2和切换他们:hover。
我不确定您如何应用更新的样式（或您如何尝试覆盖默认样式），我在下面创建了此代码段，makeStyles()但想法与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>您也可以创建一个新的样式button组件：
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>你可以在MUI v5 中使用sxprop做到这一点：
<Button
variant="text"
sx={{
':hover': {
bgcolor: 'primary.main', // theme.palette.primary.main
color: 'white',
},
}}
>
Text
</Button>
或者styled()如果你想创建一个可重用的组件：
const StyledButton = styled(Button)(({ theme, color = 'primary' }) => ({
':hover': {
color: theme.palette[color].main,
backgroundColor: 'white',
},
}));
<StyledButton variant="contained" color="primary">
Contained
</StyledButton>
<StyledButton variant="contained" color="secondary">
Contained
</StyledButton>
