2

I looked at a tutorial and wrote exact same code in my App.js to create styled button using makeStyles but it didn't work. whenever I'm using makeStyles it causes other components to disappear. I tried to use it standalone without any other component and it didn't work as well.

this is my App.js everything should work fine but .....

import React from "react";
import { Button, makeStyles } from "@mui/material";
const useStyles = makeStyles({
  root: {
    background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
    border: 0,
    borderRadius: 3,
    boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
    color: "white",
    height: 48,
    padding: "0 30px",
  },
});
function ButtonStyled() {
  const classes = useStyles();
  return <Button className={classes.root}>Test</Button>;
}
const App = () => {
  return (
    <div>
      <ButtonStyled />
    </div>
  );
};

export default App;
muller
  • 41
  • 8
  • In your example, what dissapeard? – Wraithy Feb 11 '22 at 09:53
  • @Wraithy my other component. entire page whited out ! I removed those components to use `ButtonStyled` standalone but it didn't worked too. if you try my code you will get nothing. – muller Feb 11 '22 at 09:55
  • throws it any error? and which version of mui are you using? – Wraithy Feb 11 '22 at 10:00
  • @Wraithy yes it does but I couldn't find a solution. throws this `makeStyles.js:3 Uncaught Error: MUI: makeStyles is not longer exported from @mui/material/styles. You have to import it from @mui/styles.` – muller Feb 11 '22 at 10:03
  • @Wraithy when I'm trying to import it from `styles` it is saying there's no such thing as `styles`. also I'm using version 5.4 – muller Feb 11 '22 at 10:04
  • 1
    yep, thats because as you can see in [documentation](https://mui.com/styles/basics/) makeStyles are not longer supported in `v5` you should use `emotionJs` or `styled-components` – Wraithy Feb 11 '22 at 10:10

2 Answers2

0

I think you have to wrap your ButtonStyled in ThemeProvider component. ThemeProvider accepts the required prop called theme. So first you have to make a theme with CreateTheme, Then you have to pass that theme to the ThemeProvider component.

Example:

import {createTheme, ThemeProvider, Button, makeStyles} from "@mui/material";

const theme = createTheme()

const useStyles = makeStyles({
  root: {
    background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
    border: 0,
    borderRadius: 3,
    boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
    color: "white",
    height: 48,
    padding: "0 30px",
  },
});

function ButtonStyled() {
  const classes = useStyles();
  return <Button className={classes.root}>Test</Button>;
}


const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <ButtonStyled />
    </div>
  );
};


export default App;

Hope it will work. :)

Mirza Umair
  • 349
  • 1
  • 16
0

usage makeStyles is wrong in the above code. It should something like this below 

  const useStyles = makeStyles(() => ({
  App: {
    backgroundColor: '#000000',
    color: '#fff',
    minHeight: '100vh'
  }
}));

function App() {
   const classes = useStyles();
   return(){
     <div className={classes.App}></div>

}
}
Ramesh HB
  • 7
  • 4