Как менять цвет элемента в зависимости от статуса (который прилетает в виде пропса), который построен псевдоклассом?

Question

Не могу изменить цвет псевдо элемента, в зависимости от значения пропса (status)

________________________кусочек компонента _______________________________________

            <div className={
              {/*status прилетаем из пропсов*/}
                status === "В РАБОТЕ" 
                    ? [cl.objeckt_status, cl.objeckt_status__green].join(' ')
                    : cl.objeckt_status
            }>
                <div className={status === "В РАБОТЕ"
                    ? [cl.objeckt_status__gauge, cl.objeckt_status__gauge_green].join(' ')
                    : cl.objeckt_status__gauge
                }></div>
                <p className={status === "В РАБОТЕ"
                    ? [cl.objeckt_status__titel, cl.objeckt_status__titel_green].join(' ')
                    : cl.objeckt_status__titel
                }>
                    {status}
                </p>
            </div>

_____________________________css ____________________________________________________

.objeckt_status {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: 6px;
    width: 89px;
    height: 24px;
    background-color: $status-gray-background;
}
.objeckt_status__green {
    background: $status-green-background;
}
.objeckt_status__gauge {
    position: relative;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 1px solid $status-gray;
    border-radius: 50%;
    background-color: #ffffff;
}
.objeckt_status__gauge_green {
    border: 1px solid $status-green;
}
.objeckt_status__gauge::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: $status-gray;
    bottom: 2px;
    right: 2px;
}
.objeckt_status__titel {
    margin-left: 5px;
    font-size: 12px;
    color: $status-gray;
}
.objeckt_status__titel_green {
    color: $status-green;
}

Возможно есть метод изменения цвета по статусу более изящный?

Answer 1

Как-то так наверное

var status1 = new Array("work", "finished", "work_suspend");
var status2 = new Array("В РАБОТЕ", "ЗАКОНЧЕН", "РАБОТЫ ПРИОСТАНОВЛЕНЫ");
const test = document.getElementById('test');

for (let i = 0; i < status1.length; i++) {
  let createDiv = document.createElement('div');
  createDiv.className = status1[i];
  
  let createP = document.createElement('p');
  createP.innerHTML = status2[i];
  
  createDiv.appendChild(createP);
  test.appendChild(createDiv);
}

.work{
  color: green;
}

.work:before{
  background-color: green;
}

.finished{
  color: red;
}

.finished:before{
  background-color: red;
}

.work_suspend{
  color: blue;
}

.work_suspend:before{
  background-color: blue;
}

#test > div{
  display: flex;
  align-items: center;
}

#test > div:before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 12px;
  margin-right: 6px;
}

<div id="test"></div>

БЛОГ НА HUSL

Как менять цвет элемента в зависимости от статуса (который прилетает в виде пропса), который построен псевдоклассом?

Ответы (1 шт):