'No result using makeStyles Material UI in react 18

Hi Im exploring ReactJs and Material UI and Im following outdated tutorials. I having a problem with this material UI makestyles how do I use this? This is the format that Im using and there are no results. As you see I update the material UI import too

styles.js

import { makeStyles } from "@mui/material/styles";
    
    export default makeStyles(() => ({
      appBar: {
        borderRadius: 15,
        margin: "30px 0",
        display: "flex",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
      },
      heading: {
        color: "rgba(0,183,255, 1)",
      },
      image: {
        marginLeft: "15px",
      },
    }));

App.js

import useStyles from "./styles";
    
    const App = () => {
      const classes = useStyles();
    
      return (
        <Container maxwidth="lg">
          <AppBar className={classes.appBar} position="static" color="inherit">
            <Typography className={classes.heading} variant="h2" align="center">
              Memories
            </Typography>
            <img
              className={classes.image}
              src={memories}
              alt="memories"
              height="60"

Well I can use style inside a file but I want to make a style in another file like style.js to make it more cleaner.

const App = () => {
  // const classes = useStyles();

  return (
    <Container maxwidth="lg">
      <AppBar
        style={{
          borderRadius: 15,
          margin: "30px 0",
          display: "flex",
          flexDirection: "row",
          justifyContent: "center",
          alignItems: "center",
        }}
        position="static"
        color="inherit"
      >
        <Typography variant="h2" align="center">
          Memories
        </Typography>
        <img src={memories} alt="memories" height="60" />
      </AppBar>
javascriptjavac++sharpphpreactjs


Solution 1:[1]

styles.js

    import { makeStyles } from "@mui/material/styles";
    
    export const useStyles =  makeStyles(() => ({
      appBar: {
        borderRadius: 15,
        margin: "30px 0",
        display: "flex",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
      },
      heading: {
        color: "rgba(0,183,255, 1)",
      },
      image: {
        marginLeft: "15px",
      },
    }));

Solution 2:[2]

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

const useStyles = styled((theme) => ({
  toolbarMargin: {
    ...theme.mixins.toolbar
  }
}));

const Header = () => {
  const classes = useStyles();
  return (
    <Fragment>
      <AppBar position="fixed">
        <Toolbar>
          <h1>Brand Name</h1>
          <Button variant="contained" color="error" sx={{ marginLeft: "auto" }}>
            Connect Wallet
          </Button>
        </Toolbar>
      </AppBar>
      <div className={classes.toolbar} />
    </Fragment>
  );
};

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 ANKIT AGARWAL

Related Questions