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

Question

Мне нужно в <div className='todo-item__description'></div> передать условие классов ${classes['todo-item--checked .todo-item__description']} с помощью JSS. Если передавать данное условие классов как я делаю в коде то оно не работает. Ниже я добавил весь код React и 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',
    }
});

БЛОГ НА HUSL

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

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