Я использую реактив-bootstrap и стилизованные компоненты в проекте, и у меня возникают проблемы с расширением стилей ссылка на документы
Например, я импортирую и перезаписываю компонент кнопки начальной загрузки:
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);
`;
это хорошее начало, однако я хочу переопределить это также в нескольких местах, поэтому что-то вроде:
import {Button} from './button.style'
const AuthButton = styled(Button)`
background-color: red;
`;
....
<AuthButton type='submit'>Sign In</AuthButton>
AuthButton должно иметь 3 класса (начальная загрузка), первый стилизованный компонент, а затем второй), но я вижу все, кроме стилей / класса AuthButton.Я не вижу background-color: red; нигде в DOM.Я пытался увеличить специфичность, используя &&& и до сих пор ничего.
Это ограничение для стилевых компонентов или я что-то не так делаю?