[英]MUI Button hover background color and text color
I have created an Appbar
component in React.js with 3 buttons in it but I would like to change the color when I hover over those buttons.我在 React.js 中创建了一个Appbar
组件,其中有 3 个按钮,但我想在这些按钮上 hover 时更改颜色。 The background color is #3c52b2
and the text color is #fff
.背景色为#3c52b2
,文字颜色为#fff
。 I would like the background color and text color exchange when I hover over the button.当我在按钮上输入 hover 时,我想交换背景颜色和文本颜色。
I've tried the code below but still not working.我已经尝试了下面的代码,但仍然无法正常工作。
Button: {
'&:hover': {
backgroundColor: '#ffffff',
boxShadow: 'none',
},
'&:active': {
boxShadow: 'none',
backgroundColor: '#3c52b2',
},
},
You probably don't want to change the button's :active
state but the default and the :hover
state.您可能不想更改按钮的:active
状态,而是更改默认值和:hover
状态。 The following sets the button color
to #fff
and the backgroundColor
to #3c52b2
and switch them on :hover
.下面将按钮color
来#fff
和backgroundColor
至#3c52b2
和交换机他们:hover
。
I'm not sure how you applied the updated styles (or how you tried to override the default styles), I created this snippet below with makeStyles()
but the idea is the same with the withStyles()
HOC .我不确定您如何应用更新的样式(或您如何尝试覆盖默认样式),我在下面使用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>
You could also just create a new styled button
component :您也可以创建一个新的样式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>
You can do that in MUI v5 using sx
prop :您可以在MUI v5 中使用sx
prop做到这一点:
<Button
variant="text"
sx={{
':hover': {
bgcolor: 'primary.main', // theme.palette.primary.main
color: 'white',
},
}}
>
Text
</Button>
Or styled()
if you want to create a reusable component:或者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>
If you want behaviour like default mui button - getting darker during hover, try this for mui theme:如果你想要像默认 mui 按钮这样的行为 - 在 hover 期间变暗,试试这个 mui 主题:
import { darken } from '@material-ui/core/styles';
containedPrimary: {
backgroundColor: someColor,
'&:hover': {
backgroundColor: darken(someColor, 0.3),
},
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.