vue 给富文本标签添加样式

给vue项目中v-html的内容添加样式

1.使用css 深度选择器

<style scoped>

    .content >>>img { max-width: 100%}

</style>

2.使用less深度选择器

<style lang="less" scoped>

    @import '~@/assets/css/base.less'

    .content {

           /deep/ img {

                width:1rem

           }

    } 

</style>

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

)

}

}

---