Почему не применяются JSS стили к компонентам и элементам?

Question

[Дмитрий Ярощук]

С помощью JSS передаю стили в компоненты, но стили не хотят применятся а именно:
todo-item__span::before
todo-item__span::after

todo-item__checkbox:checked + .todo-item__span::before

todo-item__checkbox:checked + .todo-item__span::after

Стили

const useStyles = createUseStyles({
    'todo-item__span': {
        'display': 'flex',
        'justify-content': 'center',
        'align-items': 'center',
        'position': 'relative',
        'cursor': 'pointer',
        '&::before': {
            'content': '',
            'width': '25px',
            'height': '25px',
            'background-color': '#cdd1d1',
            'border-radius': '3px',
            'transition': '0.3s ease-in-out all',
            'border': '2px solid transparent',
        },
        '&::after': {
            'display': 'inline-block',
            'transition-delay': '0s',
            'transition': '0.6s ease-in-out',
            'content': 'url("check.svg")',
            ' width': '16px',
            'position': 'absolute',
            'top': '50%',
            'left': '50%',
            'transform': 'scale(0) translate(-50%, -50%)',
            'background-color': 'transparent',
            'border-radius': '3px',
        },
    },
    'todo-item__checkbox': {
        'display': 'none',
        '&:checked + .todo-item__span::before': {
            'border': '2px solid #5fb8fe',
            'box-shadow': '0 0 10px 3px #5fb8fe',
        },
        '&:checked + .todo-item__span::after': {
            'transform': 'scale(1) translate(-50%, -50%)',
        },
    },
});

Компонент checkBox

export default function CheckBox(props) {
    const classes = useStyles(props);
    const { isChecked, changeCheckbox } = props;
    return (
        <label>
            <Input customClass={`${classes['todo-item__checkbox']}`}
                   type='checkbox'
                   name='checkbox'
                   isChecked={isChecked}
                   changeCheckbox={changeCheckbox}
            />

            <span className={`${classes['todo-item__span']}`}></span>
        </label>

    )
}

Comments

[historydev]

попробуй одно двоеточие

[Дмитрий Ярощук]

Владимир не помогло

[historydev]

Дмитрий Ярощук, todo-item__span::after || todo-item__span:after

Answer 1

[0xD34F]

Что, в одно ухо влетело, из другого вылетело? - один из косяков переехал сюда из предыдущего вопроса, вместо . здесь должны быть $:

'&:checked + .todo-item__span::before'

'&:checked + .todo-item__span::after'

Одной пустой строки недостаточно:

'content': '',

'content': '""',

Comments

[Дмитрий Ярощук]

0xD34F спасибо, я старался учесть ваш ответ из предыдущего вопроса, но к сожалению снова накосячил :(