styled(Component) does not apply styles on functional component-CodePudding

1. I have a component that is written with styled-components

2. Calling that component inside of new Styled component

3. Attach styles

Result: Styles are not applied

export const WarningBox = styled(InfoBox)`
${({ theme }) => css`
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  font-size: 12px;
  padding: 16px;
  border-radius: 4px;
  background-color: ${theme.colors.yellow[150]};
  border: 1px solid ${theme.colors.yellow[700]};

  a {
    font-family: Montserrat;
    font-weight: 500;
    color: ${theme.colors.blue[900]};
    margin-right: 15px;
  }
`}}
`;

This is InfoBox that I want to customize:

const Container = styled.div`
${({ theme }) => css`
  padding: 16px;
  width: 100%;
  min-height: 110px;
  border-radius: 4px;
  background-color: ${theme.colors.green[150]};
`}}
`;

...rest of the styled-components...

type InfoBoxProps = {
  title?: string;
  text?: string;
  icon?: React.ReactNode;
};

export const InfoBox: FC<InfoBoxProps> = ({
  title = '',
  text = '',
  icon,
  children,
}) => (
  <Container className="box-container">
    <Text>{text}</Text>
    {children}
  </Container>
);

CodePudding user response：

You need to pass the className prop of InfoBox to its container, otherwise is not going to apply the styles:

type InfoBoxProps = {
  className?: string;
  title?: string;
  text?: string;
  icon?: React.ReactNode;
};

export const InfoBox: FC<InfoBoxProps> = ({
  className,
  title = '',
  text = '',
  icon,
  children,
}) => (
  <Container className={`box-container ${className}`}>
    <Text>{text}</Text>
    {children}
  </Container>
);