How to stop other classes from changing colour when changing an "HTML" tag background colour
Question
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?
2 answers
solution1
0 2021-11-25 19:23:59
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
solution2
0 2021-11-25 20:14:14
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.