使用 Chakra Ui 时避免使用魔法弦

Question

一个问题，我把运行跟脉轮Ui变成了“魔弦”。让我们看一个静音文本的例子：

function Example() {
    const color = useColorModeValue("gray.400", "gray.200");
    return (
       <Text color={color} />
    )
}

这段代码有什么问题： 在我的应用程序中，我想在许多组件之间共享柔和的颜色。但是，将其明确定义为字符串意味着我必须记住静音文本的值为“gray.400”。如果我有另一个组件想要使用静音文本，我必须将字符串“gray.400”复制到所有其他组件。我最终会得到很多字符串，这使得很难在整个应用程序中进行更改。到目前为止，我探索了两种解决方案：

解决方案 1 - TextStyles API：Chakra 自带 textStyles API 开箱即用，但效果不佳对于更复杂的情况（如果我想要 hover 和 active 具有不同颜色的状态怎么办？）。

解决方案 2 - 创建一个全局对象：我创建了一个钩子useConsistantStyles()，returns 一个带有值的类似主题的对象，例如。例如：{"borderLight": "gray.200"}。然而，这感觉就像我在与图书馆作斗争。

我真的很想有一个更好的解决方案，因为我一直在运行解决这个问题。

Answer 1

我不认为解决方案 2 实际上 那么糟糕 -- 但我同意感觉一切都应该可以访问因为它已经存在。

如果您使用脉轮主题，您实际上可以导入主题（即：import { theme } from "@chakra-ui/react"

然后您可以开始访问该对象的内容，例如 colors （t 是 theme 导入）

注意：您仍然需要 'know' 对象上的 keys，但这至少是一个现有的、一致的字典，您可以参考。

我还没有用不同的颜色主题等进行测试

Answer 2

这可能已经晚了，但对于任何新的旁观者来说，自 Styled System v1.17.0 以来，chakra ui 具有语义标记。 changelog and docs 有一些细节，但重要的一点是：

Semantic tokens provide the ability to create css variables which can change with a CSS condition.

CSS 条件是暗模式或悬停等状态

在这种情况下，您可以像这样定义语义标记（使用更好的标记名称）：

const customTheme = extendTheme({
  semanticTokens: {
    colors: {
      nicelyNamedToken: {
        default: 'gray.400',
        _dark: 'gray.200',
      },
    },
  },
})

以您当前的方式导入主题，然后在主题出现的任何地方，您应该能够只使用令牌

function Example() {
    return (
       <Text color='nicelyNamedToken' />
    )
}

使用 Chakra Ui 时避免使用魔法弦

Avoid magic strings when working with Chakra Ui

reactjs

chakra-ui