es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Utilice puntos de interrupción de consulta de medios dentro de los estilos globales con Chakra UI.

Utilice puntos de interrupción de consulta de medios dentro de los estilos globales con Chakra UI.

18 Jul, 2023 Programación

Estoy tratando de usar un punto de interrupción de consulta de medios dentro de los estilos globales de Chakra UI. Esto es lo que intenté, pero no se pueden usar plantillas literales para los nombres de propiedades:

“`{code}
import { ChakraProvider, extendTheme } from “@chakra-ui/react”;

const theme = extendTheme({
styles: {
global: (props) => ({
“@media screen and (max-width: ${props.theme.breakpoints.sm})”: {
div: {
border: “1px solid”,
},
},
}),
}
});

function App() {
return (

Hello world!


);
}

export default App;


También intenté concatenar el nombre de la propiedad pero tampoco es válido:

const theme = extendTheme({
styles: {
global: (props) => ({
“@media screen and (max-width: ” + props.theme.breakpoints.sm + “)”: {
div: {
border: “1px solid”,
},
},
}),
}
});


La única forma que encontré de resolverlo es codificar el valor en lugar de leerlo desde `props.theme`:

const theme = extendTheme({
styles: {
global: {
“@media screen and (max-width: 30em)”: {
div: {
border: “1px solid”,
},
},
},
}
});
“`

¿Existe alguna otra forma de resolver esto? No pude encontrar este escenario en la documentación.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Desafortunadamente, no es posible utilizar plantillas literales para nombres de propiedades en los estilos globales de Chakra UI. Una solución alternativa es codificar el valor de la consulta de medios en lugar de leerlo de props.theme. Otra opción podría ser definir los estilos de la consulta de medios en un objeto de estilo separado y aplicarlos condicionalmente en función del punto de interrupción actual utilizando el gancho useBreakpointValue de Chakra UI. Por ejemplo:

    import { useBreakpointValue } from "@chakra-ui/react";

const estilos = {
  "@media screen and (max-width: sm)": {
    div: {
      border: "1px solid",
    },
  },
};

function App() {
  const estilosMQ = useBreakpointValue(estilos) || {};
  // `estilosMQ` será un objeto vacío si la pantalla es más ancha que `sm`

  return (
    <chakraprovider>
      <div style="{estilosMQ}">¡Hola mundo!</div>
    </chakraprovider>
  );
}

    Este enfoque permite estilos más dinámicos basados en el ancho de pantalla actual y evita la limitación de utilizar plantillas literales como nombres de propiedades en los estilos globales de Chakra UI.

Comments are closed.