Как поменять цвет компонента в зависимости от его числа? JS

Рейтинг: 0Ответов: 1Опубликовано: 24.01.2023

у меня есть текст в котором отображается количество процентов:

<p className='percent_style' >{`${res.percent}%`}</p>

css:

.percent_style {
    display: flex;
    justify-content: center;
    background-color: #4BB34B;
    border-radius: 5px;
    color: #ffffff;
    margin-top: 60px;
    font-size: 13px;
    width: 30px;
    padding: 1px 2px 1px 2px;
}

В передаваемой res.percent разные значения, мне нужно чтобы цвет был в зависимости от числа.

css javascript reactjs
Источник: Stack Overflow на русском

Ответы

▲ 0

Это можно реализовать следующим образом:

Создаем функцию, которая на основе процентов будет нам возвращать код цвета. Я сделал вот такую простую функцию:

  const getRGBC = (perc) => {
    const color = Math.round(255 - 255 * perc / 100);
    return `${color}, ${color}, ${color}`;
  }

Далее в render мы указвыаем нужный цвет

<p style={{color: `rgb(${getRGBC(res.percent)})`}}>{res.percent}%</p>



P.S.: Реализация функции создания кода цвета приведена исключительно для примера, так же как и указание цвета в `rgb()`