1 . Tengo un componente que está escrito con componentes con estilo
2 . Llamar a ese componente dentro del nuevo componente Styled
3 . Adjuntar estilos
Resultado : los estilos no se aplican
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; } `}} `;Este es InfoBox que quiero personalizar:
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> );Debe pasar el accesorio className de InfoBox a su contenedor; de lo contrario, no se aplicarán los estilos:
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> );