Как передать условие классов в компонент с помощью JSS?

Question

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

Мне нужно в <div className='todo-item__description'></div> передать условие классов

${classes['todo-item--checked .todo-item__description']}

с помощью JSS. Если передавать данное условие классов как я делаю в коде, то оно не работает:

{
                hide ? <Input text={text} type='text' name='todo-name-editing' required={true} inputRef={inputRef}/> :
                    <div className={`
                        ${classes['todo-item__description']}
                        ${classes['todo-item--checked .todo-item__description']}
                    `}>{text}</div>
            }

Общий код

export default function TodoItem(props) {
    const classes = useStyles(props);
    const {text, id, handleRemove, handleEditing} = props;
    const [hide, setHide] = useState(false);
    const [isChecked, setIsChecked] = useState(false);
    const inputRef = useRef(null);
    const showContent = () => {
        setHide(!hide);
    }
    const saveChanges = () => {
        const currentText = inputRef.current.value;
        console.log('text: ', currentText);
        handleEditing(id, currentText);
        showContent();
    }
    const changeCheckbox = () => {
        setIsChecked(!isChecked);
    }

    const onClick = () => handleRemove(id);
    return (
        <div className={`${classes['todo-item']} ${isChecked ? classes['todo-item--checked'] : ''}`}>
            {
                hide ? <Input text={text} type='text' name='todo-name-editing' required={true} inputRef={inputRef}/> :
                    <div className={`
                        ${classes['todo-item__description']}
                        ${classes['todo-item--checked .todo-item__description']}
                    `}>{text}</div>
            }
            {
                hide ? <ButtonSave saveChanges={saveChanges} customClass='todo-item__button-save'/> :
                    <>
                        <ButtonEdit showContent={showContent}/>
                        <Button onClick={onClick} text="Удалить" customClass={`${classes['todo-item__delete']}`}/>
                        <CheckBox changeCheckbox={changeCheckbox} isChecked={isChecked}/>
                    </>
            }
        </div>
    )
}

Стили

const useStyles = createUseStyles({
    'todo-item': {
        'display': 'flex',
        'padding': '10px',
        'background': '#fff',
        'border-radius': '10px',
        'justify-content': 'space-between',
        'align-items': 'center',
        'margin-bottom': '10px',
        'transition': '0.4s ease-in-out all',
        'border': '2px solid transparent',
    },
    'todo-item--checked': {
        'border': '2px solid #2196f3',
        ' box-shadow': '0 0 10px 3px #2196f3',
    },
    'todo-item__description': {
        'flex-grow': '1',
        'padding-left': '10px',
        'transition': '0.4s ease-in-out color',
    },
    'todo-item--checked .todo-item__description': {
        'color': '#6495EDFF',
    },
    'todo-item__delete': {
        'background': '#e91e63',
        'border': 'none',
        'cursor': 'pointer',
        'width': '95px',
        'padding': '10px',
        'margin-right': '10px',
    }
});

Comments

[szQocks]

'todo-item--checked .todo-item__description': {
        'color': '#6495EDFF',
    },

таких ключей в объектах не бывает, наверное поэтому там не работает что-то

[szQocks]

оказывается бывают ключи с пробелами,эх когда же я перестану тупить), просто впервые вижу ключи с пробелами

Answer 1

[0xD34F]

'todo-item--checked': {
    'border': '2px solid #2196f3',
    ' box-shadow': '0 0 10px 3px #2196f3',
},

'todo-item--checked .todo-item__description': {
    'color': '#6495EDFF',
},

'todo-item--checked': {
  'border': '2px solid #2196f3',
  'box-shadow': '0 0 10px 3px #2196f3',
  '& $todo-item__description': {
    'color': '#6495EDFF',
  },
},

<div className={`
    ${classes['todo-item__description']}
    ${classes['todo-item--checked .todo-item__description']}
`}>

<div className={classes['todo-item__description']}>