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 probé, pero no puede usar literales de plantilla para nombres de propiedades :

 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 ( <ChakraProvider theme={theme}> <div>Hello world!</div> </ChakraProvider> ); } 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 de evitarlo que encontré 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", }, }, }, } });

¿Hay alguna otra forma de evitar esto? No pude encontrar este escenario en los documentos.