通过 Chakra UI 在全局样式中使用媒体查询断点

Question

我正在尝试在 Chakra UI global styles 中使用媒体查询断点。

这是我尝试过的，但是you can't use template literals for property names：

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;

我也尝试连接属性名称，但它也无效：

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

我发现解决它的唯一方法是对值进行硬编码，而不是从props.theme 读取它：

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

还有其他方法可以解决这个问题吗？我在文档中找不到这种情况。

Answer 1

您可以使用bracket notation 访问动态属性名称。

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