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

html-css016

如何让富文本里的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那样，仅仅允许图像和表格