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

Question

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

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

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

问候。

标签： javascriptcssnode.jsreactjsecmascript-6

Answer 1

您可以简单地将 a 包装%在<span>一个类中：

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

然后为其添加一些样式：

span.percentage {
  ...
}