css Question posted in
Some basic documentation can be found here.

Css – 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"
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Solved by adding className props :tada:


  2. 0

    Styled-components doesn’t work with compound components by default. The styles you define in CustomModalItem won’t be applied directly to the Modal.Item component.

    To achieve the desired result, you can pass the styles as props to your Modal.Item component and apply them within its own styled component. Here’s an example:

    import styled from 'styled-components';
import { ReactNode } from 'react';

const ModalStyled = styled.div`
  /* Your Modal styles here */
`;

const ModalItemStyled = styled.div`
  /* Your default Modal.Item styles here */

  /* You can add additional styles based on props */
  background-color: ${(props) => (props.customBackground ? 'red' : 'transparent')};
`;

export const Modal = ({ children }: { children?: ReactNode }) => {
  return <ModalStyled>{children}</ModalStyled>;
};

Modal.Item = function ({ children, ...props }: { children?: ReactNode; customBackground?: boolean }) {
  return <ModalItemStyled customBackground={props.customBackground}>{children}</ModalItemStyled>;
};

export const CustomModalItem = styled(Modal.Item)`
  /* Additional styles specific to CustomModalItem */
`;

    In the above example, the ModalItemStyled component accepts a prop called customBackground, and the background color is set based on the prop. This way, you can pass the customBackground prop when using CustomModalItem.

    You can use it this way:

    import { Modal, CustomModalItem } from 'your-path';

const MyComponent = () => {
  return (
    <Modal>
      <Modal.Item>Default Modal Item</Modal.Item>
      <CustomModalItem customBackground>Custom Modal Item with Red Background</CustomModalItem>
    </Modal>
  );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search