Css 如何在React引导式组件中重写-btn主类

我不熟悉CSS和react引导和react，但是我正在使用react引导和样式化组件设置按钮的样式。按钮工作正常，但当我右键单击或按住按钮时，按钮颜色变为蓝色。我怎样才能避免呢？此外，我还可以看到-btn primary被附加到我的样式按钮中。我知道我能用！避免这个问题很重要，但我严格不想使用“ïimportant” 我的代码

const AppPrimaryButtonStyle=styled（按钮）`
显示：内容；
.样式化主按钮{
font:${props=>props.theme.font.family.primary}；
颜色：${props=>props.theme.color.secondaryText}；
背景色：${props=>props.theme.color.primary}；
边框颜色：${props=>props.theme.color.primary}；
}
`;
const-AppPrimaryButton=（{子项、onClick、block、href}:AppPrimaryButtonProps）=>(

CSS工作的方式是，它将在获得类后立即实现样式。这样，您在最后传递的
类将显示在屏幕上，并且具有更多首选项，因为它是在最后应用的。您可以尝试：

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

const-AppPrimaryButton=（{children，className，onClick，block，href}:AppPrimaryButtonProps）=>(
{儿童}
);

我认为会产生如下HTML：

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

点击我

希望这对您有用。
您是否使用react bootstrap和bootstrap npm？？？？？这里的问题是“btn btn primary”是在编译时添加的，而不是以前。
const AppPrimaryButton = ({ children, className, onClick, block, href }: AppPrimaryButtonProps) => (
  <AppPrimaryButtonStyle>
    <Button className={`${className} styled-primary-button`} onClick={onClick} block={block} href={href}>
      {children}
    </Button>
  </AppPrimaryButtonStyle>
);

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