如何在React Bootstrap样式化组件中覆盖-btn-primary类

Question

我是CSS的新手，可以进行React Bootstrap和React，但是我正在使用React Bootstrap和样式化组件来设计按钮的样式。该按钮可以正常工作，但是当我右键单击或单击并按住按钮时，颜色将变为蓝色。我该如何避免呢？我也可以看到-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>

希望这对您有用。