Блог

Главная - Вопросы по программированию - Не могу дать цветной фон на начальной загрузке React

Не могу дать цветной фон на начальной загрузке React

#html #css #reactjs

Вопрос:

Привет, ребята, поэтому я пытаюсь создать приложение с помощью 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;
}

Комментарии:

1. * селектор влияет на все элементы, вы должны установить уникальное имя класса для контейнера нижнего колонтитула.

Ответ №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;
 }
Метки: