html - 无法在 React Bootstrap 上提供颜色背景

Question

大家好，所以我正在尝试使用 react-bootstrap 制作应用程序，现在我正在尝试制作页脚，但我无法使用标签为页脚提供背景颜色。*它将为我的所有组件提供背景颜色，而不仅仅是我的页脚组件。任何人都可以帮我吗？感谢任何帮助。

我的代码：

import '../styles/Footer.css'
import {Row, Col} from "react-bootstrap"

const Footer = () => {
    return (
        <>
            <Row>
                <Col md={12} lg={4} className= "footerleft">
                    <img alt="Logo  Hotel"></img>
                </Col>

                <Col md={12} lg={4} className= "footermid">
                    <h3>Contact Info</h3>
                    <hr></hr>

                    <p>Email:
                    </p>
                </Col>

                <Col md={12} lg={4} className= "footerright">
                    <h3> Follow Us</h3>
                    <hr></hr>

                    <a><img src="" alt="Facebook Logo"></img></a>
                    <a><img src="" alt="Instagram Logo"></img></a>
                </Col>
            </Row>

            <div className="copyright">
                <hr></hr>
                <p>
                    Copyright © 2014
                    <br/>
                    All Rights Reserved
                </p>
            </div>

        </>
    )
}

export default Footer

我的页脚.css：

*{
    background-color: blue;
}
.copyright{
    text-align: center;
}

.copyright hr{
    color: #967A50;
}

Answer 1

像下面那样做，添加一个类并为该类赋予颜色。

return (
    <div className="footer">
        <Row>
            <Col md={12} lg={4} className= "footerleft">
                <img alt="Logo  Hotel"></img>
            </Col>

            <Col md={12} lg={4} className= "footermid">
                <h3>Contact Info</h3>
                <hr></hr>

                <p>Email:
                </p>
            </Col>

            <Col md={12} lg={4} className= "footerright">
                <h3> Follow Us</h3>
                <hr></hr>

                <a><img src="" alt="Facebook Logo"></img></a>
                <a><img src="" alt="Instagram Logo"></img></a>
            </Col>
        </Row>

        <div className="copyright">
            <hr></hr>
            <p>
                Copyright © 2014
                <br/>
                All Rights Reserved
            </p>
        </div>

    </div>
)

在 css 中替换这个

* {
    background-color: blue;
  }

有了这个

 .footer {
   background-color: blue;
 }