〈组件样式={{颜色：“红色”}} /〉

在React中，必须将style属性作为对象传递给组件。

<PieChart style={{ border: '1px solid red', fontSize: '1rem' }}> 
   </PieChart>
   <div style={{ border: '1px solid red', fontSize: '1rem' }}></div>

有关更多文档

我也试过这些，它们是为其他元素工作的，但不是为这个图。然而我找到了一个解决方案。

<script src="https://pie-meister.github.io/PieMeister-with-Progress.min.js"></script>
import React from 'react'
const style = ` <pie-chart class="nested" offset="top">
<style>
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>
<slice color1 size="100%" radius="200"><!--No label--></slice>
<slice color1 size="88%" radius="200" y="65"><tspan> $size</tspan></slice>
<slice color2 size="100%" radius="100"> </slice>
<slice color2 size="40%" radius="100" y="165"><tspan> $size</tspan>     </slice>
<slice color3 size="100%" radius="0"> </slice>
<slice color3 size="10%" radius="0" y="265"><tspan> $size</tspan></slice>
</pie-chart>`
export default function Styles() {
return (
<div dangerouslySetInnerHTML={{__html:style}}/>   
)
}