Search code examples
javascriptcssreactjsnext.jsstyled-components

Styled subcomponent in React using Styled Components not working

I'm diving into React, and I've been experimenting with a Modal component using styled components. I'm trying to achieve a similar effect to Framer Motion's motion.div, but with styled components.

So far, I've got the basic structure working great:

"use client"

export default function Modal({ children }: { children?: ReactNode }) {
  return <ModalStyled>{children}</ModalStyled>
}

Modal.Item = function ({ children }: { children?: ReactNode }) {
  return (
    <ModalItemStyled>
      {children}
    </ModalItemStyled>
  )
}

It's doing the job nicely! But, when I attempted to customize the styling using styled-components, like so:

export const CustomModalItem = styled(Modal.Item)`
  background-color: red;
`

It seems like the styling isn't being applied. 😕 I'm pretty sure I've missed something in the implementation. Any suggestions or guidance would be super appreciated! Also, I'm open to any tips for making the code even better. Thanks a bunch for your help! 🙌

"dependencies": {
  "next": "latest",
  "react": "^18",
  "react-dom": "^18",
  "styled-components": "^6.1.1"
}
Solution

  • Solved by adding className props :tada: