javascript - 在 React 中设置 jsx 元素的样式

Question

我的元素中有这行代码，它生成一定的百分比并将其显示在仪表板上。

   <text
          className="netProfit-circle-text"
          x="50%"
          y="50%"
          dy=".2em"
          textAnchor="middle"
        >
          {`${this.state.percentage}%`}
        </text>

我想要做的是能够使用 CSS 设置“%”的样式并更改其大小。我怎样才能做到这一点？提前致谢。

问候。

Answer 1

您可以使用tspan元素来包装 %部分。 tspan元素的样式可以在视觉上看起来与 text 的其余部分不同。的内容。 Link to MDN

<tspan>%</tspan>