Estoy creando una Webpage . Estoy usando Material UI para componentes. Aquí está el código:
import { makeStyles, Typography } from "@material-ui/core"; const useStyles = makeStyles((theme) => ({ container: { backgroundColor: "white", display: displayStyle }, })); export default function HomePage() { const classes = useStyles(); const [displayStyle, setDisplayStyle] = useState("flex") return ( <> <div>My Page</div> <div className={classes.container}> <div > <Typography > Our Orders </Typography> </div> </div> </> ); } Tengo un estado llamado displayStyle . Quiero usar este valor de estado en makeStyles . Pero muestra que displayStyle no está definido porque está dentro de la función. Cómo hacer que se use en makeStyles . Quiero establecer Styles basados en el valor del state . Por favor ayúdame con algunas soluciones.
El state está disponible en el componente. Por lo tanto, debe mover useStyles a su componente para acceder a displayStyle :
import { makeStyles, Typography } from "@material-ui/core"; export default function HomePage() { const [displayStyle, setDisplayStyle] = useState("flex") const useStyles = makeStyles((theme) => ({ container: { backgroundColor: "white", display: displayStyle }, })); const classes = useStyles(); return ( <> <div>My Page</div> <div className={classes.container}> <div > <Typography > Our Orders </Typography> </div> </div> </> ); }Una solución es mover makeStyles en el componente y, si no desea moverlo en el componente, puede probar este truco.
import { makeStyles, Typography } from "@material-ui/core"; let style; const useStyles = makeStyles((theme) => ({ container: { backgroundColor: "white", display: style }, })); export default function HomePage() { const [displayStyle, setDisplayStyle] = useState("flex") style = displayStyle; const classes = useStyles(); return ( <> <div>My Page</div> <div className={classes.container}> <div > <Typography > Our Orders </Typography> </div> </div> </> ); }Simplemente haga que displayStyle esté disponible para useStyle function definiendo el estado en la función useStyle .
Mueva esta línea dentro de la función useStyle .
const [displayStyle, setDisplayStyle] = useState("flex");Así que nuestro componente se ve así
import { makeStyles, Typography } from "@material-ui/core"; const useStyles = makeStyles((theme) => ({ const [displayStyle, setDisplayStyle] = useState("flex") container: { backgroundColor: "white", display: displayStyle }, })); export default function HomePage() { const classes = useStyles(); return ( <> <div>My Page</div> <div className={classes.container}> <div > <Typography > Our Orders </Typography> </div> </div> </> ); }