Javascript 使用字符串而不是CSSProperties在React中设置内联样式

有没有办法在React中设置内联样式而不使用

cssprroperties

我正在导入一组SVG，这些SVG以常规方式内联定义了样式，包括

style=“fill:#bfd9ff；”

要将其转换为在React中工作，现在我将其更改为：

style={{fill:{bfd9ff}}

事情是。。即使使用正则表达式，这也是一种痛苦（因为并非所有内容都是相同的格式）。我真的希望我可以保持字符串的原样，而不必手动将每个样式属性更改为

cssprroperties

对象

是否有其他属性或我可以使用的东西使它更容易

---

我在想象类似于

styleString=“fill:#bfd9ff”

的东西，其中设置该属性将用提供的字符串填充生成的DOM元素的

style

标记，因为这样我就可以快速地将

style

替换为

styleString

。但是我做了一些搜索，似乎找不到类似的东西，除了手动设置所有样式之外，没有其他方法吗？

您尝试过将SVG作为组件导入吗？这样，您可以将它们保存在

.svg

文件中，并且可以保留通常的

样式=…

语法

// importing a logo SVG and embedding it in JSX
import { ReactComponent as Logo } from './logo.svg';
const MyComponent = () => {
  return (
     ...
     <Logo />
  );
}

//导入徽标SVG并将其嵌入JSX
从“./Logo.svg”导入{ReactComponent as Logo}；
常量MyComponent=（）=>{
返回(
...
);
}

---

请参阅：

您可以编写自己的函数来将这样的字符串转换为所需的对象，但这不会特别令人愉快。我不知道为什么键入正确的表单比字符串表单更“痛苦”——当然，除非您正在进行大规模复制粘贴练习，可能是从现有的CSS文件？