Can't change the same HTML tag styles for each React Component

user_15229161 0
Viewed 27

I want to change the background of the body tag for each component of my page, but if I declare the background the each component css file it causes conflict.

Component 1 css file:

body {  
   background: url('../../assets/img/Forma_1.svg') left top no-repeat, 
   url('../../assets/img/Forma_2.svg') right 30% no-repeat, var(--blue);
   background-size: 295px, 64px;
}

@media screen and (min-width: 768px) {
   body {
     background: url('../../assets/img/Forma_1.svg') left top no-repeat, 
     url('../../assets/img/Forma_2.svg') right center no-repeat, var(--blue);
     background-size: 395px, 104px;
  }
}

Component 2 css file: (the styles of this file apply to all the pages because of the !important, but if I take out the styles of the first file apply on the Component 2)

body {
  background: url('../../assets/img/Forma_1.svg') left top no-repeat, 
  url('../../assets/img/Forma_2_flip.svg') left center no-repeat, #fff !important;
  background-size: 295px, 64px !important;
}

@media screen and (min-width: 768px) {
  body {
    background: url('../../assets/img/Forma_1.svg') left top no-repeat, 
    url('../../assets/img/Forma_2.svg') right center no-repeat, 
    url('../../assets/img/Patas.png') right top no-repeat, #fff !important;
    background-size: 395px, 104px, 147px !important;
 }

}

reactjs css html
1 Answers

It's hard to say without seeing what your components look like, but here are some of the possible issues I can think of:

  1. You are trying to render multiple <body> elements. This will not work because HTML expects only one <body> --> use <div className="class"> and add CSS for the class instead.
  2. You are importing both CSS files into both of your component files. Try importing only the CSS you want to use for that component
user_199085110
Related