如何在React中使用style标签？Pie-Meister样式迁移实现

Pie-Meister通过自定义元素内部嵌入<style>标签实现组件级样式隔离，在React里可以通过以下几种方式复刻这个功能：

1. 直接在组件内嵌入<style>标签 #

这是和Pie-Meister写法最接近的方式，React支持直接在JSX中写入<style>标签，只需注意样式隔离避免全局污染：

import React from 'react';

const NestedPieChart = () => {
  return (
    <div className="nested-pie-chart-wrap">
      <pie-chart className="nested" offset="top">
        <style scoped>
          {`
            path {
              stroke-linecap: round;
              stroke-width: 90;
            }
            [color1] {
              stroke: #BFBDB2;
              stroke-width: 50;
            }
            [color2] {
              stroke: #26BDD8;
              stroke-width: 60;
            }
            [color3] {
              stroke: #824BF1;
            }
            [part="path"]:not([y]) {
              stroke: #BFBDB2;
              stroke-width: 60;
              opacity: 0.4;
            }
          `}
        </style>
      </pie-chart>
    </div>
  );
};

export default NestedPieChart;

注意点： #

• Pie-Meister的脚本建议放在项目public/index.html的<head>里，避免组件重复加载脚本。
• scoped是实验性属性，若要兼容更多浏览器，可给外层容器加唯一类名，把样式规则限定在该类名之下：

  .nested-pie-chart-wrap path {
    /* 样式规则 */
  }
  

2. 使用CSS Modules实现组件级样式隔离 #

如果项目支持CSS Modules（Create React App、Vite默认支持），把样式写在单独的.module.css文件里，更易维护且天然隔离：

1. 创建NestedPieChart.module.css：

.wrap path {
  stroke-linecap: round;
  stroke-width: 90;
}
.wrap [color1] {
  stroke: #BFBDB2;
  stroke-width: 50;
}
.wrap [color2] {
  stroke: #26BDD8;
  stroke-width: 60;
}
.wrap [color3] {
  stroke: #824BF1;
}
.wrap [part="path"]:not([y]) {
  stroke: #BFBDB2;
  stroke-width: 60;
  opacity: 0.4;
}

2. 在React组件中导入使用：

import React from 'react';
import styles from './NestedPieChart.module.css';

const NestedPieChart = () => {
  return (
    <div className={styles.wrap}>
      <pie-chart className="nested" offset="top"></pie-chart>
    </div>
  );
};

export default NestedPieChart;

3. 通过Ref操作DOM设置样式（适配自动生成的元素） #

如果Pie-Meister是自动生成路径元素，无法直接在JSX中绑定样式，可以用React的useRef获取DOM后手动设置：

import React, { useRef, useEffect } from 'react';

const NestedPieChart = () => {
  const pieChartRef = useRef(null);

  useEffect(() => {
    if (!pieChartRef.current) return;

    // 给所有路径设置基础样式
    const paths = pieChartRef.current.querySelectorAll('path');
    paths.forEach(path => {
      path.style.strokeLinecap = 'round';
      path.style.strokeWidth = '90';
    });

    // 给带color1属性的元素设置样式
    const color1Els = pieChartRef.current.querySelectorAll('[color1]');
    color1Els.forEach(el => {
      el.style.stroke = '#BFBDB2';
      el.style.strokeWidth = '50';
    });

    // 其他样式规则同理实现
    const color2Els = pieChartRef.current.querySelectorAll('[color2]');
    color2Els.forEach(el => {
      el.style.stroke = '#26BDD8';
      el.style.strokeWidth = '60';
    });

    const inactivePaths = pieChartRef.current.querySelectorAll('[part="path"]:not([y])');
    inactivePaths.forEach(el => {
      el.style.stroke = '#BFBDB2';
      el.style.strokeWidth = '60';
      el.style.opacity = '0.4';
    });
  }, []);

  return (
    <pie-chart className="nested" offset="top" ref={pieChartRef}></pie-chart>
  );
};

export default NestedPieChart;

内容的提问来源于stack exchange，提问作者Haider khan