将鼠标悬停在 Material-UI 的链接上不起作用答案

【问题标题】：Hover over Link from Material-UI not working将鼠标悬停在 Material-UI 的链接上不起作用
【发布时间】：2021-10-22 15:41:29
【问题描述】：

我正在尝试将鼠标悬停在 Material UI 中的链接上，但它不起作用。 CSS由于某种原因不适用，我不知道为什么。并且类 Button 也不适用于按钮。为什么它不阅读那些 CSS？使用最新版本的 MUI。

import {Link , Button} from '@mui/material';
import {makeStyles} from '@mui/styles';

const useStyle = makeStyles({
    MenuItems : {
        '& li' : {
            display : 'inline',
            marginRight : '2rem',
            '&:hover' : {
                color : '#E0475B'
            }
        }
    },
    Link : {
        '&:hover' : {
            color : '#E0475B'
        }
    },
    Button : {
        backgroundColor : '#E0475B' , 
        color : 'white',
        fontSize : '1.5rem'
    }

})

const HomeMenu = () => {
    const classes = useStyle();
    return ( 
        <div className="Body">
            <AppBar style={{backgroundColor : 'white'}}>
                <Toolbar className = {classes.Toolbar}>
                    <div className={classes.MenuItems}>
                        <ul>
                            <li>
                                <Link href = '/' underline = 'none' style={{color : 'black'}} className={classes.Link} >Home</Link>
                            </li>
                            <li>
                                <Link href = '/' underline = 'none' style={{color : 'black'}} className={classes.Link}>About Us</Link>
                            </li>
                            <li>
                                <Link href = '/' underline = 'none' style={{color : 'black'}} className={classes.Link}>Our Mission</Link>
                            </li>
                            <li>
                                <Link href = '/' underline = 'none' style={{color : 'black'}} className={classes.Link}>Contact Us</Link>
                            </li>
                        </ul>
                    </div>
                    <div className={classes.ButtonItems}>
                        <ul>
                            <li><Button variant='contained' className = {classes.Button}>Sign Up</Button></li>
                            <li><Button variant = 'contained' className = {classes.Button}>Log In</Button></li>
                        </ul>
                    </div>
                </Toolbar>

            </AppBar>
        </div>
     );
}
 
export default HomeMenu;

【问题讨论】：

您的 inline 样式覆盖了 hover 样式。删除 inline 样式并将其移至 class 后，您的 code。

标签： css reactjs material-ui

【解决方案1】：

您的内联样式比 makeStyles 使用类名选择器的样式具有更高的特异性，只需将其删除，您的样式将再次起作用：

<Link
  href="/"
  underline="none"
  // comment this line -------------> style={{ color: "black" }}
  className={classes.Link}
>

【讨论】：