上下文中的任意值在顺风中不起作用

Question

我正在处理一个提供用户选择的颜色的上下文，但是当我试图在顺风中使用任意颜色访问内容时，它不会呈现

import React from "react";
import { IContext, IProviderProps } from "./Settings.structure";
const SettingsContext = React.createContext({} as IContext);
function SettingsProvider({ children }: IProviderProps) {
const settings = {
colors: {
primary: "#2EB5AC",
secondary: "#521AA3",
tertiary: "#FB7100",
},
};
return (
<SettingsContext.Provider
value={React.useMemo(
() => ({
settings,
}),
[settings]
)}
>
{children}
</SettingsContext.Provider>
);
}

import { useSettings } from "@/hooks/settings"
import React from "react";
export default function CheckList() {
const {settings} = useSettings();
return (
<div className={`bg-[${settings.colors.primary}]`}/>
)
}

Answer 1

import { useSettings } from "@/hooks/settings"
import React from "react";
export default function CheckList() {
const {settings} = useSettings();
const bgcolors = {
primary: 'bg-[#2EB5AC]',
secondary: 'bg-[#521AA3]',
tertiary: 'bg-[#FB7100]',
};
return (
<div className={bgcolors[settings.primary]} />
)
}

更多详细信息，请查看本文档。

https://tailwindcss.com/docs/upgrade-guide migrating-to-the-jit-engine

https://v2.tailwindcss.com/docs/just-in-time-mode