Как переопределить -btn-primary class в React bootstrap Styled Component

Question

Я новичок в CSS и реагирую bootstrap и реагирую, однако я стилизую кнопку с помощью реагирования bootstrap и стилизованного компонента. Кнопка работает нормально, но когда я щелкаю правой кнопкой мыши или удерживаю кнопку, цвет кнопки меняется на синий. Как я могу избежать этого? Также я вижу, как -btn-primary получает добавление к моей стилизованной кнопке. Я знаю, что могу использовать! Важно, чтобы избежать этой проблемы, но я категорически не хочу использовать «важный» мой код

const AppPrimaryButtonStyle = styled(Button)`
  display: contents;
  .styled-primary-button {
    font: ${props => props.theme.font.family.primary};
    color: ${props => props.theme.color.secondaryText};
    background-color: ${props => props.theme.color.primary};
    border-color: ${props => props.theme.color.primary};
  }
`;
const AppPrimaryButton = ({ children, onClick, block, href }: AppPrimaryButtonProps) => (
  <AppPrimaryButtonStyle>
    <Button className={`styled-primary-button`} onClick={onClick} block={block} href={href}>
      {children}
    </Button>
  </AppPrimaryButtonStyle>
);

export default AppPrimaryButton;

html свойство

<button type="button" class="styled-primary-button btn-primary btn btn-primary">Click Me</button>

Answer 1

CSS работает так, что он будет реализовывать стиль, как только получит класс. Таким образом, class, который вы передаете последнему, будет отображаться на экране и будет иметь больше предпочтений, потому что он применяется последним. Вы можете попробовать:

const AppPrimaryButton = ({ children, className, onClick, block, href }: AppPrimaryButtonProps) => (
  <AppPrimaryButtonStyle>
    <Button className={`${className} styled-primary-button`} onClick={onClick} block={block} href={href}>
      {children}
    </Button>
  </AppPrimaryButtonStyle>
);

Я думаю, вы получите HTML вот так:

<button type="button" class="btn btn-primary styled-primary-button">Click Me</button>

Надеюсь, это работает для вас.