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>
);
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>
);