Currently, I'm encountering issues with extending styles while working on a project that involves react-bootstrap and styled components. If you want to check out the details, here's the link to docs.
One specific problem I'm facing is overriding a bootstrap button component in my project:
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);
`;
While the above code works fine for one instance, I need to apply similar overrides in multiple locations. Something like this:
import {Button} from './button.style'
const AuthButton = styled(Button)`
background-color: red;
`;
....
<AuthButton type='submit'>Sign In</AuthButton>
The issue I'm facing is that despite defining the styles for AuthButton, they are not being reflected in the DOM. Specifically, the background-color: red; doesn't seem to be taking effect. I've attempted to increase specificity using &&& but still no luck.
I'm wondering if this is a limitation of styled components or if I am missing something in my approach?