CODEWITHSUNDEEP
material-ui
krish
krish

Reputation: 107

Unable to use Makestyles from Material Ui

So, I am using react with MUI (latest version), but the custom CSS is not working as in console. It is showing that.

makestyles is no longer exported from @mui/material/styles ,instead try this @mui/styles

But after using it, it's raising an error which is.

Failed to resolve import "@mui/styles" from "src\component\leaderboard.jsx". Does the file exist?

Here is my code.

import React from 'react'
import Container from '@mui/material/Container'
import Button from '@mui/material/Button'
import {Grid} from '@mui/material'
import {Typography} from '@mui/material'
import {makeStyles} from '@mui/material/styles'

const useStyles = makeStyles({
  btnLeader: {
    margin: '1rem',
  },
})

const Leaderboard = () => {
  const classes = useStyles()

  return (
    <Container align='center'>
      <Typography
        variant='h4'
        align='center'
        fontFamily='revert-layer'
        color='black'
        gutterBottom>
        Leaderboard
      </Typography>
      <Grid
        container
        spacing='5m'
        justifyContent='center'>
        <Grid item>
          <Button
            variant='contained'
            className={classes.btnLeader}
            align='center'>
            Register
          </Button>
          <Button
            variant='outlined'
            align='center'>
            Top Gainers
          </Button>
        </Grid>
      </Grid>
    </Container>
  )
}

export default Leaderboard

Upvotes: 2

Views: 2456

Answers (3)

Hamed Siaban
Hamed Siaban

Reputation: 1682

makeStyle is deprecated in MUI v5. Instead you can use styled, or the very easy to use sx-prop.

styled

import { styled } from "@mui/material/styles";
import { Button } from "@mui/material";

const StyledButton = styled(Button)({
  margin: "1rem",
});

export default function Test() {
  return <StyledButton variant="contained">styled button</StyledButton>;
}

sx-prop

import { Button } from "@mui/material";

const classes = {
  btnLeader: {
    margin: "1rem",
  },
};

export default function Leaderboard() {
  return (
    <Button variant="contained" sx={classes.btnLeader}>
      sx prop button
    </Button>
  );
}

Upvotes: 1

DSDmark
DSDmark

Reputation: 1271

If you are still encountering an error, make sure that you have installed the latest version of @mui/styles in your project. First try to run that.

With NPM

npm install @mui/styles

Or, with yarn

yarn add @mui/styles

Then try to use that.

import { makeStyles } from '@mui/styles';

Here is the official documentation:- MUI Material. Please read this first for better understanding.

The things are that @mui/styles is not compatible with React.StrictMode or React 18. And @mui/styles is the legacy styling solution for MUI. It depends on JSS as a styling solution, which is not used in the @mui/material any more, deprecated in v5.

Upvotes: 0

Digimhotep
Digimhotep

Reputation: 56

It looks like you are using an outdated version of Material-UI. The makeStyles API has been moved to a new package @material-ui/styles in the latest version. Try installing and importing like that:

npm install @material-ui/styles
import { makeStyles } from '@material-ui/styles';

Also, make sure that the @material-ui/styles package is installed in your project and the import path is correct.

Upvotes: 0

Related Questions