如何在react中使用样式标签?

Question

<script src="https://pie-meister.github.io/PieMeister-with-Progress.min.js"></script>

<pie-chart className="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> 

我正在使用这个库pie-master，它具有如上所示的样式属性。我想在react中实现类似的。

Answer 1

& lt;组件样式={{颜色:"red"}/祝辞

Answer 2

在React中，你必须将style属性作为对象传递给组件。假设你的组件名是PieChart，你可以像这样传递style属性

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

查看更多文档

Answer 3

我也尝试了这些，它们适用于其他元素，但不适用于这张图。然而，我找到了一个解决办法。

<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}}/>   
)
}