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

Question

有没有办法在不使用CSSProperties的情况下在 React 中设置内联样式？

我正在导入一堆以常规方式内联定义 styles 的 SVG，例如

style="fill:#bfd9ff;"

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

style={{fill: "#bfd9ff"}}

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

是否有替代属性或我可以用来使其更容易的东西？

我在想象类似styleString="fill:#bfd9ff"的东西，其中设置该属性将使用提供的字符串填充生成的 DOM 元素的style标记，因为这样我就可以快速将style替换为styleString 。 但是我做了一些搜索，似乎找不到这样的东西，除了手动设置所有 styles 之外，没有别的办法吗？

Answer 1

您是否尝试过将 svg 作为组件导入？ 这样，您可以将它们保存在.svg文件中，并且可以保持通常的style=...语法。

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

请参阅： https://medium.com/@rossbulat/working-with-svgs-in-react-d09d1602a219