如何让富文本里的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>

)

}

}

使用 textare ,输入的文本;当存在换行( \n )、空格符的时候,显示的文本与输入框的文本显示不一致,换行和空格并未生效。如下图:想要的效果图如下:https://blog.csdn.net/Leon_940002463/article/details/102775758

你的 .h1是一个类了,此时你需要在上边h1标签里面加上 calss=“h1”,这样你的.h1就能生效了;但是看你的写法是想直接控制标签,那么你只需要把 .h1的  .  去掉就行了,标签直接写就可以了,不用带“.”。