如何在 Typescript React.FC 中作为组件导入的 SVG 上使用 className答案

【问题标题】：How can I use className on SVG imported as a component in Typescript React.FC如何在 Typescript React.FC 中作为组件导入的 SVG 上使用 className
【发布时间】：2021-06-01 16:37:47
【问题描述】：

我有 React、Typescript、svgr。一切看起来都不错。

{
  test: /\.svg$/,
  use: ['@svgr/webpack'],
},

import Logo from 'assets/icons/logo.svg';

<Logo className={iconClassName} />;

TS 不喜欢。

TS2322: 类型 '{ className: string; }' 不可分配给类型 '内在属性'。类型上不存在属性“className” '内在属性'。

我该怎么办？

谢谢！

PS 有趣！当我导入 {ReactComponent as Logo} - 我不再有错误了。

【问题讨论】：

参考stackoverflow.com/questions/44369706/…
@Eric，没用，但是谢谢

标签： reactjs typescript svg svg-react-loader

【解决方案1】：

认为如果不使用 props，就不能将 className 赋予这样的组件。我建议你做的如下：

import Logo from 'assets/icons/logo.svg';
<img src={Logo} className={iconClassName}/>

【讨论】：

谢谢，但是当我用作 img 时，它会破坏项目的 css 样式和其他内容。我必须使用 svg 作为组件。

【解决方案2】：

试试这个代码：

 <div className={iconClassName}>
  <img src="assets/icons/logo.svg"/>
 </div>

【讨论】：

虽然这段代码可以为这个问题提供一个解决方案，但最好添加上下文来说明它为什么/如何工作。这可以帮助未来的用户参考并最终将这些知识应用到他们自己的代码中。解释代码时，您也可能会得到用户的积极反馈/赞成。
谢谢，但是当我用作 img 时，它会破坏项目的 css 样式和其他内容。我必须使用 svg 作为组件。

【解决方案3】：

我创建了 index.d.ts 类型文件并添加了以下代码

declare module "*.svg" {
  import React = require("react");
  const src: React.FC<React.SVGProps<SVGSVGElement>>;
  export default src;
}

通过这种方式，您还可以访问 svg 标签支持的其他所有道具

【讨论】：