你好，我正试图在一个名为调查.module.css:
html {
background-image: linear-gradient( 94.3deg, rgba(26,33,64,1) 10.9%, rgba(81,84,115,1) 87.1% );
}
我已经使用以下import语句将CSS导入到我的react组件中：import-stylefrom'/Survey.js’
Survey.js中的代码位于下方
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
我的问题是，当我用上面的代码更改CSS中的背景时，我的项目中其他页面的背景也会发生变化。所有这些页面都使用***.module.CSS导入其CSS文件我试着使用CSS模块来避免这个问题，但我仍然遇到了。有什么建议吗？
给你的html类，这样你的css就不会影响其他页面。
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
用您喜欢的className创建一个div来包装其余内容，然后您可以向其中添加类似background-image的css样式。我不知道在整个html文档上设置background-image背后的逻辑。
<div className={styles.surveyContainer}>
<div className={styles.content}>
...rest of the content
</div>
</div>