Стилизация элемента JSX в реагировать

Question

В моем проекте есть строка кода, которая генерирует определенный процент и отображает его на панели инструментов.

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

Что я хочу сделать, так это уметь стилизовать «%» и изменить его размер, используя CSS. Как я могу это сделать? Заранее спасибо.

С уважением.

Answer 1

да, это возможно. Вы можете отобразить его как два разных элемента 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.

Answer 2

Вы можете использовать элемент tspan для переноса части %. Элемент tspan можно оформить так, чтобы он визуально отличался от остального содержимого text. Ссылка на MDN

<tspan>%</tspan>

Answer 3

Вы можете просто обернуть % в <span> классом:

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

, а затем добавить к нему несколько стилей:

span.percentage {
  ...
}