Как изменять стиль псевдоэлемента label?

Question

[Сергей]

Сделал кастомный чекбокс через псевдоэлемент. Как в React при отработке click добавить в него стиль?

Comments

[Роман Александрович]

покажите код

[Сергей]

Роман Александрович,

const Check = props => {
    return(
        props.boxes.map((el,i)=>{
            return(
        <div
        key={el.id}
        className = 'check'
        >
            <div className='check--conteiner'>
                <label htmlFor={el.name}>{el.name}</label>
                <input id={el.name} onChange={(evt)=>props.checkHandler(evt, el)} type = 'checkbox' value={el.name}/>
                <img className={el.checked?'checked':null} src={el.src} alt={el.name}/>
            </div>
        </div>
            )
        })
    )
}

[Сергей]

Сергей,

input{
        display: none;
        position: relative;
   
    }
    label{
        position: relative;
        &::after{
            position: absolute;
            content: "";
            right: 10px;
            top: 5px;
            width: 10px;
            height: 10px;
            border: 1px solid #a79258;
        }
    }

Answer 1

[Владимир Проскурин]

Напрямую нельзя. Нужно через родителя.
Вешаете так же на label дополнительный класс (модификатор),

<label htmlFor={el.name} className={el.checked ? 'checked' : null}>{el.name}</label>

и в стилях задаете необходимые свойства

label.checked {
    &::after{
        /* стили */
    }
}