RichText.Content 添加 className - CSS

在使用 RichText 组件时，我们经常需要对其中的某些元素进行样式设置。这时候，可以使用 RichText.Content 组件的 className 属性来添加 CSS 类名，从而实现样式控制。

基础用法

假设我们有以下富文本内容：

<RichText>
  <p>这是一段普通文本</p>
  <h2>这是一个二级标题</h2>
  <ul>
    <li>这是列表项 1</li>
    <li>这是列表项 2</li>
  </ul>
</RichText>

现在我们想要对其中的二级标题设置样式，可以这样做：

<RichText>
  <p>这是一段普通文本</p>
  <h2 className="text-red">这是一个二级标题</h2>
  <ul>
    <li>这是列表项 1</li>
    <li>这是列表项 2</li>
  </ul>
</RichText>

然后在 CSS 文件中设置 .text-red 类名的样式即可：

.text-red {
  color: red;
}

这样就可以把二级标题的文字设为红色了。

多个类名

我们还可以给某个元素同时添加多个类名，只需要使用空格隔开即可：

<RichText>
  <p>这是一段普通文本</p>
  <h2 className="text-red bg-yellow">这是一个二级标题</h2>
  <ul>
    <li>这是列表项 1</li>
    <li>这是列表项 2</li>
  </ul>
</RichText>

然后在 CSS 文件中设置 .text-red 和 .bg-yellow 类名的样式即可：

.text-red {
  color: red;
}
.bg-yellow {
  background-color: yellow;
}

这样就可以把二级标题的文字设为红色，背景设为黄色了。

注意事项

• 由于使用了 RichText.Content 组件，所以需要先导入相关模块：import { RichText } from '@tarojs/components'。
• className 属性所对应的值只能是字符串类型，不能是数组等其他类型。
• 在 CSS 文件中，类名的命名需要尽量避免和已有的类名冲突，以免产生意外的效果。
• 在使用 RichText.Content 组件的过程中，需要注意对富文本内容的合法性进行验证，以防止 XSS 攻击等安全问题。