[英]How to stop other classes from changing colour when changing an "HTML" tag background colour
您好,我正在尝试使用名为Survey.module.css的文件中的以下代码更改页面背景:
html {
background-image: linear-gradient( 94.3deg, rgba(26,33,64,1) 10.9%, rgba(81,84,115,1) 87.1% );
}
我已经使用以下导入语句将 CSS 导入到我的反应组件中: import style from './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 class 这样你的 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
创建一个包含内容的 rest 的div
,然后您可以添加css
样式,如background-image
。 我不明白在整个html
文档上设置background-image
的逻辑。
<div className={styles.surveyContainer}>
<div className={styles.content}>
...rest of the content
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.