Стилизованный подкомпонент в React с использованием стилевых компонентов не работает ⇐ CSS

[Anonymous]

Я погружаюсь в React и экспериментирую с модальным компонентом, используя стилизованные компоненты. Я пытаюсь добиться эффекта, аналогичного motion.div Framer Motion, но с помощью стилизованных компонентов.

На данный момент базовая структура работает отлично:

"использовать клиент" экспортировать функцию по умолчанию Modal({ Children }: { Children?: ReactNode }) { вернуть {дети } Modal.Item = function ({ Children }: { Children?: ReactNode }) { возвращаться ( {дети} ) } Он отлично справляется со своей задачей! Но когда я попытался настроить стиль с помощью стилевых компонентов, вот так:

export const CustomModalItem = styled(Modal.Item)` цвет фона: красный; ` Похоже, что стиль не применяется. Я почти уверен, что что-то упустил в реализации. Любые предложения или рекомендации будут очень оценены! Кроме того, я открыт для любых советов, как сделать код еще лучше. Спасибо большое за вашу помощь!
"зависимости": { "следующий": "последний", "реагировать": "^18", "react-dom": "^18", "styled-comments": "^6.1.1" }