Tenga en cuenta que estoy usando MUI 4.12.3. En el archivo AI tenemos esto (simplificado) además de un componente funcional. Dentro de la declaración de devolución del componente funcional, también la aplico a un elemento JSX (no se muestra). Esto funciona bien.
const useStyles = makeStyles((t) => ({ content: { minHeight: '100vh', }, })); En el archivo B, me gustaría anular el content de la clase CSS basado en isDesktop . ¿Es esto posible/deseable? Algo como esto, pero no funciona:
const useStyles = makeStyles({ content: { minHeight: (props) => (props.isDesktop ? '100vh' : '112vh'), }, }); //And inside my functional component: const isDesktop = useMediaQuery(Theme.breakpoints.up('sm')); const classes = useStyles({ isDesktop }); Tenga en cuenta que la intención es no representar el componente JSX en el archivo B, solo es deseable anular el content de la clase CSS en el archivo B. ( classes no se usan en mi muestra).
Puede exportar esta función fuera de su componente funcional
export const getStyles = (isDesktop) => { return { content: { minHeight: isDesktop ? "100vh" : "112vh", }, }; };Y luego donde quieras que se aplique tu estilo.
const isDesktop = useMediaQuery(Theme.breakpoints.up('sm')); ... <SomeMuiComponent sx={getStyles(isDekstop)} />Esto se puede hacer con algunos ganchos. Digamos que el nombre de mi componente funcional es "Mi componente". Mi componente material es "componente material". Necesitamos importar el gancho useWindowSize. Eso nos ayuda a obtener el tamaño de la ventana. el tamaño es de escritorio o móvil. En el estilo de creación, tenemos que crear dos clases para escritorio y móvil minHeight. Con la verificación simple if else podemos pasar estas dos clases condicionalmente a materialcomponent className prop. A continuación se muestra el código.
1.crea dos clases con makestyles
const useStyles = makeStyles((t) => ({ contentDesktop: { minHeight: '100vh', }, contentMobile:{ minHeight: '110vh', } }));2.importar el gancho useWindowSize
import useWindowSize from "hooks/useWindowSize";3. código de componente funcional.
const Mycomponent = () => { const classes = useStyles(); let myclass=""; const width = useWindowSize(); const isDesktop = width >=1024; const mobile= width <= 600; if(isDesktop){ myclass=classes. contentDesktop; } if(mobile){ myclass=classes.contentMobile; } return ( <materialcomponent className={`${myclass}`} ); }