Какой подход вы используете при использовании анимации со стилевыми компонентами?

Question

Я пытаюсь создать аккордеон с реактивными и стилевыми компонентами.

Я пытаюсь изменить отображение: нет для отображения: заблокировать и добавить переход, но он меняется без перехода, он работает нормально только если яУдалите свойство display для styled-компонента, но я могу увидеть часть div, если я удалю это свойство. Извините за мой английский и спасибо

https://codesandbox.io/s/z2nj50z46p?fontsize=14

Answer 1

Я думаю, что ваша проблема была в этой части CSS

const AcordionItemWrapper = styled.div`
  width: 100%;  // This is now 100% and not 80%
  height: auto;
  overflow: hidden;
  background-color: blue;
`;

И это изменение дает этот результат.

Это гарантирует, что ваша вкладка darkgoldenrod составляет 100% от ее контейнеровширина.Когда он активен, выпадающий список также составляет 100%.

После дальнейшего изучения я обнаружил вашу проблему.Некоторые проблемы с разметкой, плюс браузер применяет поля по умолчанию для определенных элементов HTML.В этом случае для абзаца применяется поле по умолчанию.цвет фона игнорируется при использовании поля.

Ссылка ниже должна быть такой, как вы хотите.

https://codesandbox.io/s/nkj7mx73jj