如何在 React bootstrap Styled Component 中覆盖 -btn-primary 类

Question

I am new to CSS and react bootstrap and react however I am styling a button using react bootstrap and styled component. The button works fine but when I right click or click and hold the button color changes to blue. How can I avoid it? Also I can see the -btn-primary getting append to my styled button. I know i can use !important to avoid this issue but I strictly do not want to use "ïmportant" my code

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 property

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

Answer 1

CSS work's in a way that it will implement the style's as soon as it get's a class. In that way the class that you are passing at the last will be displayed on the screen and has more preference because it is applied last. You can try:

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

I think will produce an HTML like this:

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

Hope this works for you.