ChakraUI如何仅为特定文档/段落内a标签设置下划线样式

不需要修改全站默认链接样式，以下三种方案都是Chakra原生支持的，不会影响非CMS区域的链接展示：

• 方案1：限定作用域的全局样式配置
  Chakra的globalStyles支持标准CSS选择器，你完全可以给CMS渲染的内容块外层加一个专属类名，只写这个类名内部的链接样式，不会泄露到全局。
  示例配置：

  import { extendTheme } from '@chakra-ui/react'
  
  const customTheme = extendTheme({
    styles: {
      global: {
        // 仅命中cms-content容器内、p标签下的a标签
        '.cms-content p a': {
          textDecoration: 'underline',
          // 可以按需加hover等交互效果
          _hover: {
            textDecorationThickness: '2px'
          }
        }
      }
    }
  })
  

  渲染CMS内容时，给最外层容器加上className="cms-content"即可，容器外的所有链接都保持默认无下划线的样式。
• 方案2：重写Prose排版组件样式（推荐富文本场景使用）
  如果你的CMS内容是大段富文本/Markdown，优先用Chakra官方提供的Prose排版组件渲染，它本身就是为长文本排版设计的。你只需要在主题配置里重写Prose组件的基础链接样式，所有用Prose包裹的CMS内容会自动应用样式，其他区域的链接完全不受影响。
  示例配置：

  const customTheme = extendTheme({
    components: {
      Prose: {
        baseStyle: {
          a: {
            textDecoration: 'underline',
            color: 'brand.600'
          }
        }
      }
    }
  })
  

  使用时直接把CMS内容包在<Prose>标签内即可，不需要额外加自定义类名。
• 方案3：通过组件sx属性局部设置样式
  如果只有少量页面渲染CMS内容，不想修改全局主题配置，可以直接给CMS内容的外层Box组件写sx属性，sx支持完整CSS选择器语法，样式作用域仅局限在当前组件内部，没有全局污染。
  示例代码：

  import { Box } from '@chakra-ui/react'
  
  export default function CmsContent({ content }) {
    return (
      <Box
        sx={{
          'p a': {
            textDecoration: 'underline'
          }
        }}
        dangerouslySetInnerHTML={{ __html: content }}
      />
    )
  }
  

你提到的「选中所有p标签内部的a标签单独设置样式」完全可以实现，不管是全局配置还是组件内样式，Chakra都支持标准CSS选择器规则，只要把选择器的命中范围限定在CMS内容的容器内，就不会出现全站样式被修改的问题，不需要额外找“仅特定文档生效的全局样式”类的特殊能力，靠选择器作用域就能实现需求。

内容的提问来源于stack exchange，提问作者Erik