Overwriting styled component 3 times?

Question

I'm using react-bootstrap and styled components on a project and am having issues with extending styles link to docs

For example, im importing and overriding a bootstrap button component:

import styled from 'styled-components';
import Button from 'react-bootstrap/Button';

export const PrimaryButton = styled(Button)`
  background-color: ${props => props.theme.purple300};
  font-size: 1.25rem;
  font-weight: 700;
  color: #FFFFFF;
  padding: 5px 50px;
  border: none;
  border-radius: 30px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
`;

this is a good start, however, I want to override this in several locations as well, so something like:

import {Button} from './button.style'

const AuthButton = styled(Button)`
  background-color: red;
`;
 ....
 <AuthButton type='submit'>Sign In</AuthButton>

AuthButton should have 3 classes (bootstrap, the first styled component, and then the second), but I'm seeing everything except the AuthButton styles/class. I don't see the background-color: red; anywhere in the DOM. I've tried increasing specificity using &&& and still nothing.

Is this a limitation with styled components or am I doing something wrong?

Answer 1

you need pass className as a props to your component

Answer 2

I fixed this. It was due to not having a className prop in my Button component: https://www.styled-components.com/docs/basics#styling-any-component

EDIT: Since the mods are absolutely horrendous on SO, I will add an example:

function MyComponent({className}) { ... }