ChakraUI中特定文档的全局样式

Question

我正在与ChakraUI合作，我希望用户在CMS中输入一个大文本块的链接，要下划线，但我不希望我网站上的其他链接被下划线。我可以把它改成全局样式，但这会改变网站上所有的样式。我该怎么做才能实现呢?是否有像一个特定文档的全局样式，或者某种方式，我可以针对p标签内的所有a标签?

谢谢!:)

Answer 1

通过使用sx道具，您将确定具体的样式:

<Box
sx={{
a: {
textDecoration: "underline",
color: "blue.500",
_hover: {
color: "blue.800"
}
}
}}
>
<p>Hello <Link href="#">Link</Link>.</p>
</Box>

你的目标可以更精确，如果你需要:

sx={{
p: {
a: { /* styles */ }
}
}}

或:

sx={{
'p a': { /* styles */ }
}}

对于更完整的文章排版样式，您还可以使用Prose包:https://chakra-ui.com/guides/recipes/prose