Dado que useStyle() no funciona en mi material-UI v5xx (¿alguien puede explicar por qué?), estaba confundido acerca de cómo pasar accesorios en esta versión.
por ejemplo, para Material-UI v4, simplemente podemos escribir así:
const Navbar = () => { const [open, setOpen] = useState(false); const classes=useStyles({open}); return(....); } pero para v5 solo puedo usar Styled() en lugar de useStyle() , así que estoy confundido acerca de esta parte, quiero hacer un botón que muestre la barra de búsqueda, así que lo he creado así:
const theme = createTheme({ palette: { primary: { main: "#FFE162", contrastText: "black", }, }, }); // in this part i want my open function work const StyleSearch = styled("div")(({ theme })() => ({ display: "flex", alignItems: "center", backgroundColor: alpha(theme.palette.common.white, 0.4), "&:hover": { backgroundColor: alpha(theme.palette.common.white, 0.6), }, borderRadius: theme.shape.borderRadius, width: "50%", [theme.breakpoints.down("sm")]: { display: (props) => (props.open ? "flex" : "none"), }, })); const Navbar = () => { const [open, setOpen] = useState(false); function handleOpen() { setOpen(true); } return( <...> <StyleSearchBtn onClick={handleOpen} />); <.../> } como puede ver, la open no está configurada, ¿cómo pasar eso a los accesorios?
No es compatible con la nueva versión de React, como puedes comprobar en su documentación
⚠️ @mui/styles es la solución de estilo heredada para MUI. Está en desuso en v5. Depende de JSS como solución de estilo, que ya no se usa en @mui/material. Si no desea tener emoción y JSS en su paquete, consulte la documentación de @mui/system, que es la alternativa recomendada.
⚠️ @mui/styles no es compatible con React.StrictMode o React 18.
Aquí tienes la documentación necesaria para usar styled() correctamente.
Para su ejemplo, puede pasar los accesorios normalmente, como:
<StyleSearch props={theme, open} />o
<StyleSearch open={open} theme={theme} {...props} />