Style an imported styled-component

Question

I have the following Component:

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

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

export default H3;

And I want to extend it's styles, for example in a different file:

import { H3 } from 'components';

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

How can I achieve this?

Answer 1

You need to expose the className prop on your exported component so it can receive the new 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;

Then you can extend your component styles in a different file as you have suggested:

import H3 from 'components';

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

Reference link https://www.styled-components.com/docs/basics#styling-any-components