How to use a style tag in react?-CodePudding

<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>

I was using this library pie-master and it had styled attributes as shown above. I want to implement the similar in react.

CodePudding user response：

<Component style={{color: "red"}} />

CodePudding user response：

In React, you have to pass the style attribute to the component as an object. Let's say your component name is PieChart, you can pass style attribute like this

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

For more documentation

CodePudding user response：

I tried these too, they were working for other elements but not for this graph. However i found a solution.

<script src="https://pie-meister.github.io/PieMeister-with-Progress.min.js"></script>
import React from 'react'
const style = ` <pie-chart  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}}/>   
)
}