如何在 React 引导样式组件中覆盖 -btn-primary 类

Question

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

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>

希望这对你有用。