(CSS & React) Как мне установить backgroundImage один только один компонент? - PullRequest
Новая
       10

(CSS & React) Как мне установить backgroundImage один только один компонент?

1 голос
/ 20 марта 2019

Я пытаюсь установить backgroundImage только для одного компонента в проекте React.если я прикреплю его к элементу .body , он будет отображаться как backgroundImage на ВСЕХ компонентах.если я установлю его на элемент .wrapperContainer текущего компонента, он будет отображаться так:

Как это выглядит на .wrapperContainer

Ножелаемый вывод, который я хочу, это (без отображения фонового изображения на всех других компонентах)

Желаемый вид

CSS: 

body {
background: url("../../services/images/hehe.jpg") no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; 

animation: increase 60s linear 10ms infinite;
-webkit-transition: all 5.2s ease-in-out;
-moz-transition: all 5.2s ease-in-out;
-ms-transition: all 5.2s ease-in-out;
-o-transition: all 5.2s ease-in-out;
transition: all 5.2s ease-in-out;
z-index: -2;

background-color: #f6f8fa;

}

Реагировать 

  return (
  <div className="wrapperContainer"> /*This is the element i replace .body with*/
    <Card className="wrapperCard">
       xxxxxxx
       xxxxx
       xxx
</Card>
</div>
)

Ответы [ 2 ]

0 голосов
/ 20 марта 2019

Добро пожаловать в СТЕК Арасто. Вы можете установить его на нужное имя компонента. Например, у вас есть фон, который появляется только в компоненте Card.

Теперь предположим, что функция рендеринга Card выглядит следующим образом: 

<div className="bg-apply">

</div>

Вы можете добавить класс к родительскому элементу div в компоненте Card и добавить стиль к этому классу, как вы делали это в своем вопросе. Таким образом, стиль / фоновое изображение будут применяться только к этому конкретному div / компоненту. 

bg-apply {
background: url("../../services/images/hehe.jpg") no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; 
animation: increase 60s linear 10ms infinite;
-webkit-transition: all 5.2s ease-in-out;
-moz-transition: all 5.2s ease-in-out;
-ms-transition: all 5.2s ease-in-out;
-o-transition: all 5.2s ease-in-out;
transition: all 5.2s ease-in-out;
z-index: -2;
background-color: #f6f8fa;
}
0 голосов
/ 20 марта 2019

Попробуйте, если это поможет 

return (
  <div className="wrapperContainer" style={ { background: 'url("../../services/images/hehe.jpg") no-repeat center center fixed' } }> /*This is the element i replace .body with*/
    <Card className="wrapperCard">
       xxxxxxx
       xxxxx
       xxx
    </Card>
  </div>
)
...