React TypeScript中SCSS样式化SVG组件失效问题排查

我在React TypeScript项目中使用Webpack + @svgr/webpack将SVG导入为React组件，给组件添加了自定义属性social-icon，并尝试用CSS属性选择器[social-icon]设置样式，但样式完全没有应用到SVG组件上。

相关代码示例 #

SVG组件使用代码

import GitHubLogo from './github.svg';

// ...其他业务代码

return (
  <div>
    <GitHubLogo social-icon />
  </div>
)

对应的SCSS选择器

[social-icon] {
  // 此处样式未生效
  width: 32px;
  height: 32px;
  fill: #000;
}

SVG文件内容

<svg width="48px" height="48px" fill="#ffffff">
    <rect width="10px" height="10px"></rect>
</svg>

当前Webpack处理SVG的规则

{
  test: /\.svg$/i,
  issuer: /\.[jt]sx?$/,
  resourceQuery: { not: [/url/] },
  use: ['@svgr/webpack']
}

解决方案 #

1. 使用符合HTML规范的自定义属性（data-*前缀）

React不会将非data-开头的自定义属性渲染到DOM元素上，导致CSS选择器无法匹配。将自定义属性改为data-前缀格式：

修改组件调用：

<GitHubLogo data-social-icon />

对应SCSS选择器：

[data-social-icon] {
  width: 32px;
  height: 32px;
  fill: #000;
}

2. 改用className作为样式选择器（更推荐）

直接给SVG组件添加className，是React中设置样式的标准方式，避免自定义属性的兼容性问题：

修改组件调用：

<GitHubLogo className="social-icon" />

对应SCSS选择器：

.social-icon {
  width: 32px;
  height: 32px;
  fill: #000;
}

3. 确保@svgr/webpack允许传递props到SVG元素

默认情况下@svgr会将组件props传递给内部<svg>标签，但如果有自定义配置可能被禁用。可以在Webpack规则中明确配置：

{
  test: /\.svg$/i,
  issuer: /\.[jt]sx?$/,
  resourceQuery: { not: [/url/] },
  use: [
    {
      loader: '@svgr/webpack',
      options: {
        svgo: false, // 可选，关闭svgo优化避免意外移除属性
        ref: true, // 可选，支持ref引用
      },
    },
  ],
}

内容的提问来源于stack exchange，提问作者Matt Young