如何在Reaction引导样式组件中重写-btn主类
我对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>
希望这对您有效。
相关文章