Tengo el siguiente componente:

const StyledH3 = styled.h3`
  direction: ${(props) => (props.isRTL ? 'rtl' : 'ltr')};
`;

const H3 = ({ children }) => (
  <StyledH3 isRTL={isChildrenRTL(children)}>
    {children}
  </StyledH3>
);

export default H3;

Y quiero extender sus estilos, por ejemplo en un archivo diferente:

import { H3 } from 'components';

const Title = styled(H3)`
  background-color: red;
`;

¿Cómo puedo lograrlo?

3
Asaf David 25 feb. 2018 a las 18:44

4 respuestas

La mejor respuesta

Debe exponer el accesorio className en su componente exportado para que pueda recibir el nuevo className:

const StyledH3 = styled.h3`
    direction: ${(props) => (props.isRTL ? 'rtl' : 'ltr')};
`;

const H3 = ({ children, className }) => ( // Note - className prop.
    <StyledH3 
        className={className} // Need to add this here 
        isRTL={isChildrenRTL(children)}
    >
        {children}
    </StyledH3>
);
export default H3;

Luego, puede ampliar los estilos de sus componentes en un archivo diferente como ha sugerido:

import H3 from 'components';

const Title = styled(H3)`
    background-color: red;
`;

Enlace de referencia https://www.styled-components.com/docs/basics # styling-any-components

7
Cubed Eye 8 abr. 2018 a las 12:30

Logré resolver esto utilizando extend y withComponent métodos. Entonces, en lugar de exportar el componente, terminé exportando el componente con estilo con toda la lógica dentro:

const TwoWayP = styled.p`
  direction: ${props => isChildrenRTL(props.children) ? 'rtl' : 'ltr' };
`;

Y luego extienda el componente con estilo y si es necesario (y necesito) cambiar su etiqueta:

const TwoWayH3 = TwoWayP.withComponent('h3');

const Title = TwoWayH3.extend`
  background-color: red;
`;

Entonces, la parte principal de mi solución fue mover la lógica dentro del componente con estilo sin un componente React

0
vsync 31 oct. 2018 a las 19:30

Uso de componentes con estilo v4 "como":

H3.js

const StyledH3 = styled.h3`
  color:red;
`;

export const H3 = ({ children }) => (
  <StyledH3>{children}</StyledH3>
);

Card.js

import { H3 } from 'components';

const Title = styled.div`
   border-bottom: 1px solid red;
`;

export const Card = (props) => (
  <div>
     <Title as={H3} />   <----- using "as" --------
     <p>...</p>
  </div>
);
0
vsync 31 oct. 2018 a las 20:29

Según la documentación de styled-component, debe hacerlo así.

export const StyledH3 = styled.h3`
 direction: ${(props) => (props.isRTL ? 'rtl' : 'ltr')};
`;
const H3 = ({ children }) => (
  <StyledH3 isRTL={isChildrenRTL(children)}>
    {children}
  </StyledH3>
);
export default H3;

Y luego, en su otro archivo donde lo necesite, haga algo como esto.

import H3, { StyledH3  } from 'components';

const Title = StyledH3 .extend`
  background-color: red;
`;

Como referencia, eche un vistazo a Ampliación de estilos en componentes con estilo

Tenga en cuenta que solo puede extender el estilo de un componente con estilo y no una clase de componente React tonto para styled-component.

0
Adeel Imran 25 feb. 2018 a las 16:54