CODEWITHSUNDEEP
cssmaterial-uinext.js
Code Guru
Code Guru

Reputation: 15578

makestyles is not working nextsjs material ui version 5

I am using nextjs with material ui

"@mui/material": "^5.0.1",
"@mui/styles": "^5.0.1",

and here is my component

import { AppBar, Toolbar, Typography, Box, Button, Link } from "@mui/material";
import { makeStyles } from "@mui/styles";

const Navbar = () => {

  const useStyles = makeStyles(() => ({
    navItem: {
      color: "white"
    }
  }));

  const classes = useStyles();

  return (
    <>
      <Box sx={{ flexGrow: 1 }}>
        <AppBar position="static">
          <Toolbar>
            <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
              MyCode
            </Typography>


            <Typography variant="h6" component="div">
              <Link className={classes.navItem} href="/blog">Blog</Link>
            </Typography>

            <Button color="inherit">Login</Button>

          </Toolbar>
        </AppBar>
      </Box>
    </>
  )
}

export default Navbar;

I have created this navbar with a blog nav item and with login button.

Blog nav item is not visible on the screen as the color it inherit the color of background of nav bar.

So I added some classes by using makeStyles and created a navItem class with color:white

It shows the class on the DOM on html but this is not visible in Styles section, so color is not white.

what can be the issue?

Upvotes: 1

Views: 813

Answers (1)

Konrad
Konrad

Reputation: 287

You should define useStyles outside your functional component. In this case you don't need use makeStyles. Just:

<Link color="white" />

Upvotes: 1

Related Questions