如何在Reaction引导样式组件中重写-btn主类 [英] How to override -btn-primary class in React bootstrap Styled Component

问题描述

我对CSS和Reaction Bootstrap和Reaction不熟悉，但是我正在使用Reaction Bootstrap和样式组件设置按钮的样式。按钮工作正常，但当我右击或单击并按住按钮时，颜色会变为蓝色。我怎么才能避免呢？我还可以看到-btn-PRIMARY被附加到我的样式按钮上。我知道我可以使用！重要的是避免这个问题，但我严格不想使用"aimportant" 我的代码

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>

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>

希望这对您有效。

这篇关于如何在Reaction引导样式组件中重写-btn主类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！