如何在 React Chakra UI 主题中使用 json 值

Question

所以我一直在尝试（但没有成功）使用存储在 json 文件中的值来覆盖 Chakra UI 主题。

我的 data.json 文件看起来像这样

[
  {
    “radius”: “1px”,
    “color”: “#5843F5”,
    “font”: “Arial”
  }
]

我的 theme.js 文件看起来像这样

import { extendTheme } from “@chakra-ui/react”
import JsonData from ‘data.json’

export const myNewTheme = extendTheme({
 JsonData.map(item => ({
  colors: {
   primary: item.color,
   secondary: “#FF6F91”,
   highlight: “#00C9A7”
  },
 }))
});

返回的问题如下

JS theme.js src (1)
 ‘,’ expected. ts(1005) [Ln7, Col 11]

所以在 JsonData.map 中的“.”突出显示为错误。

知道我做错了什么吗？

非常感谢您的帮助

Answer 1

这将取决于您希望如何定义和访问您的自定义主题。

如果存储了很多主题，您想如何 select 每个主题？

如果你想在json中保留一个数组，你可以添加id

[
  {themeId: '1111', color: 'xxx'},
  {themeId: '1112', color: 'xxx'},
...
]

但是，我更经常看到对象在多个主题中的使用，例如：

{
  darkTheme: {primaryColor:'', font:'',...},
  lightTheme: {primaryColor:'', font:'',...},
  ...
}

然后您可以访问每个主题JsonData['darkTheme'] or JsonData['lightTheme']

关注你只定义一个主题的代码，我可以在他们的 docs 中看到它需要一个对象，但你的 JSON 存储在数组

中

你有两个选择：

从数组中获取你的元素，比如

const customTheme = JsonData[0];
extendTheme({
  colors: {
  secondary: "#FF6F91",
   highlight: "#00C9A7",
   primary: customTheme.color,
  }
})

或将主题作为对象存储在 .json 文件中。

{
  "radius": "1px",
  "color": "#5843F5",
  "font": "Arial"
}

额外：要使其完全动态化，您可以使用“扩展运算符”覆盖主题内与相同名称匹配的所有值：

const customTheme = JsonData[0];
extendTheme({
 colors: {
   secondary: "#FF6F91",
   highlight: "#00C9A7",
   ...customTheme
  }
})

如何在 React Chakra UI 主题中使用 json 值

How to use json values with React Chakra UI theme

json

reactjs

chakra-ui