时间戳

首页 > 解决方案 > 在 React 中使用字符串而不是 CSSProperties 设置内联样式

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

问题描述

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

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

style="fill:#bfd9ff;"

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

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

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

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

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

标签： javascriptcssreactjstypescript

解决方案

您是否尝试过将 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

推荐阅读