覆盖 Box 的主题 CSS

Question

我正在尝试开发应用程序的前端，我想为一些框设置主题。

我从here中提取了一个例子：

// theme.js
import { extendTheme } from "@chakra-ui/react"
const theme = extendTheme({
  components: {
    Button: {
      // 1. We can update the base styles
      baseStyle: {
        fontWeight: "bold", // Normally, it is "semibold"
      },
      // 2. We can add a new button size or extend existing
      sizes: {
        xl: {
          h: "56px",
          fontSize: "lg",
          px: "32px",
        },
      },
      // 3. We can add a new visual variant
      variants: {
        "with-shadow": {
          bg: "red.400",
          boxShadow: "0 0 2px 2px #efdfde",
        },
        // 4. We can override existing variants
        solid: (props) => ({
          bg: props.colorMode === "dark" ? "red.300" : "red.500",
        }),
      },
    },
  },
})
export default theme

并使其适应这个测试代码

const theme = extendTheme({
  components: {
    Box: {
      // 1. We can update the base styles
      baseStyle: {
      },
      // 2. We can add a new button size or extend existing
      sizes: {
      },
      // 3. We can add a new visual variant
      variants: {
        Mini: {
          fontWeight: "bold", // Normally, it is "semibold"
          textDecoration: "underline",
          boxShadow: "0px 30px 5px -20px rgba(0,0,0,0.75)"
        }
      },
    },
  },
})

想法是我可以说 <Box variant="Mini">，但这实际上行不通。 None 的样式对框或其内容有任何影响。

如果我将 Box: 更改为 Text: 并添加文本元素 <Text variant="Mini">test</Text>，则会应用这些样式。它也不适用于 Grid 但适用于 Button

我做错了什么？

我知道 Box 有 boxShadow 属性，但它非常有限。

Answer 1

我还没有想出如何用 CSS 修改 Box，部分原因是我要给出的答案没有列出 Box 的文件。

页面上有注释

If you're curious as to what component styles you can override, please reference the default component style files.

当我想修改抽屉时，我发现了同样的问题。我去了 link 并打开了 drawer.ts。在那里我找到了这个函数

const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({
  overlay: baseStyleOverlay,
  dialogContainer: baseStyleDialogContainer,
  dialog: baseStyleDialog(props),
  header: baseStyleHeader,
  closeButton: baseStyleCloseButton,
  body: baseStyleBody,
  footer: baseStyleFooter,
})

这给了我一些有用的键。然后我发现我像这样修改了我的主题样式，我可以按预期修改方面。

import { extendTheme } from '@chakra-ui/react';
let theme = extendTheme({
  components: {
    Drawer: {
      baseStyle: {
        dialog: {
          bg: "blue",
        },
        closeButton: {
          bg: "hotpink",
        },
        header: {
          bg: "red",
        },
      },
    },
  }
});

Answer 2

阅读图层样式中的文档，我在 Grid 组件上遇到了同样的问题，也尝试了与您相同的方法，感谢您的回答

https://chakra-ui.com/docs/theming/component-style#usestyleconfig-api
https://chakra-ui.com/docs/features/text-and-layer-styles

覆盖 Box 的主题 CSS

Overriding the theme CSS of Box

react-native

chakra-ui