在运行时获取有效的 React CSSProperties 名称答案

【问题标题】：Getting valid React CSSProperties names at runtime在运行时获取有效的 React CSSProperties 名称
【发布时间】：2021-07-29 01:45:41
【问题描述】：

我想创建一个下拉菜单，允许某人为 React 中的内联样式选择驼峰化 CSS 属性（例如宽度、颜色、textAlign）。

我没有手动填充整个下拉列表，而是想到如果我能以某种方式使用 React.CSSProperties 类型作为值，那么我不需要自己硬编码任何东西。不过，我不确定这样的事情是否可能。

或者也许还有另一种我不知道的访问这些属性名称的方法？

【问题讨论】：

不可能。 TypeScript 在运行时不存在。您可以做的是循环遍历document.body.style 的键，但根据您运行它的浏览器，您会得到不同的键。

【解决方案1】：

您可以使用以下数据：https://github.com/mdn/data/tree/master/css。

库 csstype 从那里获取数据并从中构建类型信息。如果您将构建步骤中的数据转换为您的需要，您也可以在运行时使用它。

如果您不需要验证值或不需要知道特定的浏览器属性，那么您可以使用document.body.style，就像@Sergiu Paraschiv 的评论中回答的那样。

【讨论】：