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

html-css041

如何让富文本里的css局部生效,第1张

在 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>

)

}

}

float：漂浮属性允许网页制作者将文本环绕在一个元素的周围，这同html3.2

中img元素的align一样，但css1允许所有对象漂浮，而不像html3.2那样，仅仅允许图像和表格

一个是全局的类，可以全局定义一个类，其他使用的此类样式的标签的样式都会改变；一个是局部的类，只对局部有效，其他没有影响。

p.one{xxx}表示只对

标签下class=“one”的元素起作用；.one则表示全局都可以用，只要class=“one”的元素都起作用。

在CSS中定义样式，最好使用局部类，当网站很大的时候，这样使用可以很好的明确各自的样式，不会造成使用混乱。