更改“HTML”标签背景颜色时如何阻止其他类更改颜色
[英]How to stop other classes from changing colour when changing an "HTML" tag background colour
问题描述
Hello I am trying to change the background of my page using the following code in a file called Survey.module.css :
您好，我正在尝试使用名为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'我已经使用以下导入语句将 CSS 导入到我的反应组件中： import style from './Survey.js'
The code in Survey.js is below 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
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.我的问题是，当我用上面的代码改变 CSS 中的背景时，我项目中其他页面的背景也会改变。 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.所有这些页面使用 ***.module.css 导入他们的 CSS 文件我尝试使用 CSS 模块来避免这个问题，但我仍然遇到它。 Any advice?有什么建议吗？
2 个解决方案
解决方案1
0 2021-11-25 19:23:59
Give your html class so your css doesn't affect to other page.给你的 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
解决方案2
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.如何使用您喜欢的className创建一个包含内容的 rest 的div ，然后您可以添加css样式，如background-image 。 I don't get logic behind setting a background-image on the entire html document.我不明白在整个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.