Hola, estoy explorando ReactJs y Material UI y estoy siguiendo tutoriales obsoletos. Tengo un problema con este material UI makestyles ¿cómo uso esto? Este es el formato que estoy usando y no hay resultados. Como puede ver, también actualizo la importación de la interfaz de usuario del material.
estilos.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", }, }));Aplicación.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"Bueno, puedo usar el estilo dentro de un archivo, pero quiero crear un estilo en otro archivo como style.js para hacerlo más limpio.
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>estilos.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", }, }));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> ); };