Блог

Я пытаюсь навести курсор на ссылку из пользовательского интерфейса материала, но это не работает. CSS по какой-то причине не применяется, и я не могу понять, почему. И кнопка «Класс» также не работает с кнопками. Почему он не читает эти CSS? Используя последнюю версию MUI.

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

const useStyle = makeStyles({
    MenuItems : {
        'amp; li' : {
            display : 'inline',
            marginRight : '2rem',
            'amp;:hover' : {
                color : '#E0475B'
            }
        }
    },
    Link : {
        'amp;: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;
 

Ваш встроенный стиль имеет более высокую спецификацию, чем тот, в makeStyles котором используется селектор имен классов, просто удалите его, и ваши стили снова будут работать:

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