如何让富文本里的css局部生效

Posted 2023-04-24

在 react 中，css 样式默认是全局生效的，想要使样式局部生效可以使用以下方案：

给 css 文件名加一个 .module.css 后缀，编译后的 css 样式文件就会导出一个对象，为每个选择器起一个随机名字
// 文件名假设为 index.module.css

.box
width: 50px;
height: 50px;


// 在这个文件中设置全局样式
:global(.active) color: re
import React, Component from 'react'
// 引入自定义样式
import style from './index.module.css'

export default class Home extends Component
render()
return (
<div>
<p className=style.box>home</p>
<p className="active">list</p>
</div>
)

参考技术A 在 react 中，css 样式默认是全局生效的，想要使样式局部生效可以使用以下方案

给 css 文件名加一个 .module.css 后缀，编译后的 css 样式文件就会导出一个对象，为每个选择器起一个随机名字

1
2
3
4
5
6
7
8
9
10
11
// 文件名假设为 index.module.css

.box
width: 50px;
height: 50px;


// 在这个文件中设置全局样式
:global(.active)
color: red;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React, Component from 'react'
// 引入自定义样式
import style from './index.module.css'

export default class Home extends Component
render()
return (
<div>
<p className=style.box>home</p>
<p className="active">list</p>
</div>
)

参考技术B <style>
#testwidth:100px;height:100px;background:#000;color:#fff
</style>
<div id="test">上面的CSS语句就只对这个DIV有效</div>
<div>上面的CSS语句就不对这个DIV起作用</div>
CSS有一个术语叫作选择器，

建议对CSS基础再加强一些。

至于你说的引入单独CSS文件，跟上面是一样做法，主要选择器对应上就行了，比如你引用了一个CSS文件，里面的内容是：
test.css:
#testwidth:100px;height:100px;background:#000;color:#fff
html:
<link rel="stylesheet" type="text/css" href="test.css" />
<div id="test">上面的CSS语句就只对这个DIV有效</div>
<div>上面的CSS语句就不对这个DIV起作用</div> 参考技术C // 文件名假设为 index.module.css

.box
width: 50px;
height: 50px;


// 在这个文件中设置全局样式
:global(.active)
color: red;

import React, Component from 'react'
// 引入自定义样式
import style from './index.module.css'

export default class Home extends Component
render()
return (
<div>
<p className=style.box>home</p>
<p className="active">list</p>
</div>
)

参考技术D react 中使 css 样式局部生效 | 码农家园
在react 中,css 样式默认是全局生效的,想要使样式局部生效可以使用以下方案 给css 文件名加一个 .module.css 后缀,编译后的 css 样式文件就.可以生效了

笔记（局部变量全局变量）

2017-07-08 11:50:08

局部变量： 在函数内定义的参数及变量，在函数外部无法访问。

全局变量：在函数体外部定义的变量，在整个程序中都生效。（如果内部函数有引用外部函数的同名变量或全局变量，并且对此变量有修改。那么python会认为他是一个局部变量）

 

global 变量名----可让变量更改为全局变量

nonlocal 变量名------可让变量更改为全局变量（内嵌函数中使用）