Estoy usando componentes MUI en el proyecto ReactJs , por alguna razón necesito personalizar algunos componentes para que respondan de acuerdo con el ancho de la pantalla.
Agregué media query y la pasé como atributo de estilo en los componentes pero no funcionó, ¿alguna idea?
Estoy usando un código como este:
const drawerWidth = { width: '50%', '@media(minWidth: 780px)' : { width: '80%' } } <Drawer ..... containerStyle = {drawerStyle} > </Drawer> El código funciona solo para la web, en el dispositivo móvil no tiene efecto. Incluso el código CSS no se aplica. Lo comprobé en la consola del desarrollador. Estoy usando la versión 0.18.7 de MUI.
Cualquier ayuda sería apreciada.
PD: Según el requisito, necesito hacer algunos cambios según el tamaño de la pantalla usando CSS .
Al utilizar el atributo de puntos de interrupción del tema, puede utilizar los mismos puntos de interrupción utilizados para los componentes Grid y Hidden directamente en su componente.
API
theme.breakpoints.up(key) => media queryArgumentos
clave (Cadena | Número): una clave de punto de interrupción (xs, sm, etc.) o un número de ancho de pantalla en píxeles.
Devuelve consulta de medios: una cadena de consulta de medios lista para usarse con JSS.
Ejemplos
const styles = theme => ({ root: { backgroundColor: 'blue', [theme.breakpoints.up('md')]: { backgroundColor: 'red', }, }, });para más información echa un vistazo a esto
Así que esto es lo que puedes hacer (truco rápido). Sin embargo, Material UI se quejará de que está haciendo un cálculo innecesario.
const styles = { drawerWidth: { width: '50%', ['@media (min-width:780px)']: { // eslint-disable-line no-useless-computed-key width: '80%' } } }Tienes un error tipográfico en la consulta de medios. Debe usar la siguiente sintaxis y funcionará como se esperaba:
const drawerWidth = { width: '50%', '@media (min-width: 780px)' : { width: '80%' } }en vez de
const drawerWidth = { width: '50%', '@media(minWidth: 780px)' : { width: '80%' } }