Global styles in ChakraUI for specific document

Question

I am working with ChakraUI and I want links that the user enters in the CMS in one big text block, to be underlined, but I don't want other links on my website to be underlined. I can change it in the global style, but that will change all of them on the website. What can I do to make this happen? Is there like a global style for a specific document only, or some way I can target all the a tags inside of a p tag?

Thanks! :)

Answer 1

By using the sx props you will scope specifics styles :

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

Your targets can be more precise if you need :

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

or :

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

For more complete typographics styles for articles, you can also use the Prose package : https://v2.chakra-ui.com/community/recipes/prose