Переход CSS не работает с компонентом в стиле эмоций ⇐ CSS

[Anonymous]

У меня проблема с переходом CSS.
Когда изменяется выбранное значение состояния, изменяется ширина CSS. Я хочу применить эффект перехода к ширине, но если я использую стилизованный компонент, переход не сработает.
вот мой код стилизованного компонента:

Код: Выделить всё

    const Bar = styled.div`
width: 28px;
height: 6px;
cursor: pointer;
border-radius: 8px;
background-color: #ffffff66;
transition: width 1s ease;
${({ selected }) =>
selected &&
`
width: 40px;
background-color: #fff;
`}
`;

В этом коде не используются стилизованные компоненты (это сработало):

Код: Выделить всё

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

Подробнее здесь: https://stackoverflow.com/questions/790 ... -component