Overriding third party components

Question

I have a Button component in my app that I want to make themeable. For that I've created a ThemeableButton.js and I wanted to override the Button component using styled(Button).

I don't use inline styling, so the idea is that my Button component doesn't define any styles and doesn't know anything about styled-components.

I thought overriding 3rd party components would do the job but it is not working for me. I've created a webpackbin example here.

My problem is in ThemeableButton.js. here:

    const StyledButton = styled(Button)`
      background: ${(props) => props.theme.primaryColor };
      border: 2px solid ${(props) => props.theme.borderColor };
      color: ${(props) => props.theme.textColor };
    `;

I was expecting this to work, to override my Button.js component and add the style props. Of course if I define StyledButton like this

    const StyledButton = styled.button

it works, but the idea is to override my components. I will have much more complex components that I don't want to define using the styled constructor.

Any ideas of how to make this work?

Thanks!

Answer 1

There is a note in the bottom of section you refer to https://github.com/styled-components/styled-components#third-party-components

Note: styled-components generate a real stylesheet with classes. The class names are then passed to the react component (including third party components) via the className prop. For the styles to be applied, third-party components must attach the passed-in className prop to a DOM node. See Using styled-components with existing CSS for more information!

You need to use className prop in your Button.js to make it work