Я хочу применить фоновое изображение к телу только одного компонента

Question

Я очень новичок в React, поэтому заранее извиняюсь за ошибки.

В моем приложении React, скажем, у меня есть 2 компонента, и, поскольку стили CSS являются глобальными, он выбирает стили CSS из всех файлов.

Однако, я буду sh чтобы добавить полное фоновое изображение к одному из компонентов, которого я смог достичь, используя этот код в моем CSS файле:

body {
  background-image: url("../image.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Проблема в том, что то же изображение также применяется к другой компонент. Я прочитал несколько ответов и обнаружил, что могу использовать хук ComponentDidMount и добавить изображение в тег body. Я попробовал это, но ничего не показывает.

  componentDidMount() {
    document.body.style.backgroundImage = "url('../image.jpg')";
    document.body.style.backgroundPosition = "center";
    document.body.style.backgroundRepeat = "no-repeat";
    document.body.style.backgroundSize = "cover";
  }

РЕДАКТИРОВАТЬ

Я понял, что у меня была неправильная формулировка вопроса. Я хочу сказать, что у меня есть две страницы в React. Для одной из страниц я хочу полное фоновое изображение. Однако, поскольку стили CSS являются глобальными, фоновое изображение применяется ко всем страницам.

Answer 1

Компонент обычно возвращает JSX и в большинстве случаев div. Другими словами, чтобы применить css к одному компоненту, я имею в виду jsx, который компонент отображает. Вы должны определить класс css, который применяет фоновое изображение к div, который визуализирует компонент, и делает высоту div высотой окна. Вы можете сделать это через встроенный css все

   

 const MainDiv =()=>(
    <div classname="testClass">
        This will show background image in the covering the entire body
        //Other content of your page can be added here like the rest of your page contents
       <header>
          This is my blog post
       </header>
       <nav>
          this is my navbar
       </nav>
    </div>
);
ReactDOM.render(<MainDiv />, document.getElementById("root"));

    .testClass{
    backgroundImage :"url('../image.jpg')";
    backgroundPosition :"center";
    backgroundRepeat : "no-repeat";
    background-size : "cover";
    width: 100%;
    height: 100vh
}

Answer 2

Вы можете использовать встроенное оформление или заданное c оформление, назначив указанный класс c или идентификатор верхнему элементу одного компонента.

ВНУТРЕННЕЕ СТИЛИРОВАНИЕ Пример:

// If Background variable has url to the background image.
const style = {
  backgroundImage: `url(${Background})`
}


// in component use that inline style

return (
<div style={style}></div>
);

ЕСЛИ ВЫ ХОТИТЕ РАБОТАТЬ только с телом ... затем добавьте класс к телу для монтирования компонента A и удалите класс для монтирования компонента B. И прикрепите свойство background к классу.