如何使基本Web自定义主题样式的字典类型安全
如何使基本Web自定义主题样式的字典类型安全
提问于 2022-10-28 21:41:31
我在Next.js项目中使用Base组件框架。我已经扩展了主题对象以添加一些自定义颜色。我这样做是按照这里的说明：https://baseweb.design/guides/theming/#extending-the-theme-type。注意，文档说主题类型被称为ThemeT，但实际上它似乎被称为Theme (也许文档已经过时了？)
Anyhoo ...It可以很好地处理这样的基本用例：
import { themedUseStyletron as useStyletron} from "../../Shared/Theme";
const MyComponent = props => {
const [css, theme] = useStyletron()
return (
<div className={css({background: theme.postItYellow})}>Hello!</div>
)
}postItYellow是我添加到扩展主题中的自定义颜色。打字本不抱怨这一点。我们都很好。问题是，我有一些代码，在这些代码中，我使用一个简单的字典动态地从主题中选择一个颜色，如下所示：
export const STATUS_TO_COLOR = {
TO_DO: 'postItYellow',
IN_PROGRESS: 'postItBlue',
DONE: 'postItGreen'
}如果我这样做：
const MyComponent = props => {
const [css, theme] = useStyletron()
return (
<div className={css({background: `${theme[STATUS_TO_COLOR['TO_DO']]}`,})}>Hello!</div>
)
}我得到以下错误：TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'CustomThemeT'. No index signature with a parameter of type 'string' was found on type 'CustomThemeT'.
我尝试在TS中重写几种不同的STATUS_TO_COLOR，但是得到的错误几乎是相同的。谁能帮我指出正确的方向吗？先表示谦卑的感谢。
回答 1
Stack Overflow用户
发布于 2022-10-28 22:36:02
我刚想出了一个办法
export type TaskBackgroundColor = 'postItYellow' | 'postItBlue' | 'postItGreen'
export type BackgroundColorDict = { [key: string] : TaskBackgroundColor}
export const STATUS_TO_COLOR : BackgroundColorDict = {
TO_DO: 'postItYellow',
IN_PROGRESS: 'postItBlue',
DONE: 'postItGreen'
}如果你知道一种更地道或更严格的方式，可以随意发表答案。蒂娅！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74241185
复制相关文章
相似问题
腾讯云开发者
