React makeStyle is not working properly and causes other components to disappear

Question

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;
 

Answer 1

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. :)