React项目中ChakraUI主题颜色无法应用于boxShadow问题求助

问题出在你直接把主题色路径写在boxShadow的字符串里，Chakra UI只会解析像borderColor: 'theme.dark.background'这种直接引用主题色键值的写法，不会解析字符串内部的主题变量。

你可以改用函数式样式来解决，通过函数参数获取主题对象，再手动拼接boxShadow的值：

input: {
  fontSize: 'desktop.body',
  _focus: {
    borderColor: 'theme.dark.background',
    boxShadow: (theme) => `0 0 0 1px ${theme.colors.dark.background}`,
  },
},

这样函数会接收Chakra的theme对象，你可以直接从中取出dark.background对应的颜色值，再拼接成符合要求的boxShadow字符串，就能正常应用主题颜色了。

内容的提问来源于stack exchange，提问作者Ben Shekhtman