How to stop other classes from changing colour when changing an "HTML" tag background colo-CodePudding

Hello I am trying to change the background of my page using the following code in a file called Survey.module.css:

html  {
    background-image: linear-gradient( 94.3deg,  rgba(26,33,64,1) 10.9%, rgba(81,84,115,1) 87.1% );
  }

I've imported the CSS into my react component using the following import statement: import style from './Survey.js'

The code in Survey.js is below

  import React from 'react'
import { Container, Col, Row } from 'react-bootstrap'
import style from './Survey.module.css'

function Survey() {
  return (
  <html>
  <div>
    <h1 className="display-5 text-center mt-5 text-white">Tell us about yourself</h1>
    <div className={`${style.container} d-flex justify-content-center align-items-center`}>
      <div className='row justify-content-md-center'>
        <div className='col col-lg-5 shadow p-3 mb-5 bg-white rounded'>
          <img src='https://static.toiimg.com/photo/msid-77430626/77430626.jpg?228049' className='rounded img-fluid'></img>
        </div>
        <div className='col col-lg-5 shadow p-3 mb-5 bg-white rounded'>
          <h1></h1>
        </div>
      </div>
    </div>
  </div>
  </html>
  )
}

export default Survey

My issue is that when I change the background in CSS with the above code, the background of other pages in my project also change. All those pages import their CSS files using ***.module.css I tried to use CSS modules to avoid this problem but I am still encountering it. Any advice?

CodePudding user response：

Give your html class so your css doesn't affect to other page.

html.survey  {
    background-image: linear-gradient( 94.3deg,  rgba(26,33,64,1) 10.9%, rgba(81,84,115,1) 87.1% );
}

import React from 'react'
import { Container, Col, Row } from 'react-bootstrap'
import style from './Survey.module.css'

function Survey() {
  return (
  <html className="survey">
  <div>
    <h1 className="display-5 text-center mt-5 text-white">Tell us about yourself</h1>
    <div className={`${style.container} d-flex justify-content-center align-items-center`}>
      <div className='row justify-content-md-center'>
        <div className='col col-lg-5 shadow p-3 mb-5 bg-white rounded'>
          <img src='https://static.toiimg.com/photo/msid-77430626/77430626.jpg?228049' className='rounded img-fluid'></img>
        </div>
        <div className='col col-lg-5 shadow p-3 mb-5 bg-white rounded'>
          <h1></h1>
        </div>
      </div>
    </div>
  </div>
  </html>
  )
}

export default Survey

CodePudding user response：

How about creating a div with a your preferred className that wraps the rest of the content and you can add your css styling like background-image to it. I don't get logic behind setting a background-image on the entire html document.

<div className={styles.surveyContainer}>
    <div className={styles.content}>
        ...rest of the content
    </div>
</div>