在带有 Chakra 的全局样式中使用媒体查询断点 UI

Question

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

这是我试过的但是 :

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",
        },
      },
    }),
  }
});

在带有 Chakra 的全局样式中使用媒体查询断点 UI

Use media query breakpoint inside global styles with Chakra UI

javascript

reactjs

chakra-ui