为什么我的 react-bootstrap 按钮的 CSS 不起作用？答案

【问题标题】：Why my css for react-boostrap button didn't work?为什么我的 react-bootstrap 按钮的 CSS 不起作用？
【发布时间】：2021-11-19 08:28:20
【问题描述】：

大家好，我正在尝试将 css 用于我的自定义 react-boostrap 按钮，但它不起作用。它显示的结果与我想要的不同，有人知道为什么吗？

这是我的代码：

            <Container fluid>
                <Row className="Aboutus fontReg">
                    <Col sm={12} lg={6}>
                        <Button variant="custom" as={Link} to={"/Room"}>
                            See Room
                        </Button>
                    </Col>
                </Row>
            </Container>

CSS：

.btn-custom{
    font-size: 21px;
    background-color: #10255A;
    padding: 8px 25px 8px 25px;
    color:white;
    border-radius: 5px;
}

【问题讨论】：

您能否在输出 HTML 中包含一个工作示例？（您可以使用浏览器 Inspector 或 Developer tools 查看实际输出的 HTML 是什么。在 Windows 上的 Chrome 中，它按 F12。）
我该怎么做？
您也可以使用className 为按钮添加一个明确的类名，对吧？然后你总是确定它有那个类名:)
我尝试过这种方法，但它没有覆盖 boostrap 的默认主题（按钮颜色保持蓝色）
如果按钮上的类名是您在 CSS 中使用的类名，则可能是特异性问题。 CSS 选择器越具体，它的优先级就越高。 Read about CSS specificity here.

标签： html css reactjs react-bootstrap

【解决方案1】：

您应该将类直接添加到您的按钮。正如上面 Philipp 所说：越具体越好。

您的按钮代码应如下所示：

<Button className="btn-custom> </Button>

您当然可以保留您的其他属性（链接、到、任何其他）

请注意，className 属性的大写很重要。

【讨论】：