在反应中设置jsx元素的样式答案

【问题标题】：Styling a jsx element in react在反应中设置jsx元素的样式
【发布时间】：2020-05-31 13:33:38
【问题描述】：

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

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

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

问候。

【问题讨论】：

标签： javascript css node.js reactjs ecmascript-6

【解决方案1】：

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

<tspan>%</tspan>

【讨论】：

【解决方案2】：

您可以简单地将 % 包装在带有类的 <span> 中：

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

然后给它添加一些样式：

span.percentage {
  ...
}

【讨论】：

当我这样做时没有渲染。百分号消失了。

【解决方案3】：

是的，这是可能的。您可以将其渲染为两个不同的 jsx 元素，如下所示：

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

工作示例：https://codesandbox.io/s/hungry-leftpad-lue55。

【讨论】：

感谢您的回复。但不幸的是，当我这样做时，它什么也没显示。
这是一个工作示例：codesandbox.io/s/hungry-leftpad-lue55.
非常感谢。现在一切都很好。