IT技术 - 如何在 React 引导样式组件中覆盖 -btn-primary 类 - 吾爱随笔录

我是 CSS 的新手，并且 react bootstrap 和 react 但是我正在使用 react bootstrap 和样式化组件来样式化按钮。该按钮工作正常，但是当我右键单击或单击并按住按钮时，按钮颜色变为蓝色。我怎样才能避免它？我也可以看到 -btn-primary 附加到我的样式按钮上。我知道我可以使用 !important 来避免这个问题，但我绝对不想使用“重要”我的代码

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>

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