How to override Payload's built-in CSS variables?

default discord avatar
3 months ago
1 1

I'm encountering an issue with override variables in scss file. I have created my own :root to override CSS variables, but my changes are not taking effect.

I had to add !important to override the style of a rich-text class. I'm concerned that this is not a best practice.
Can you please help me figure out why my :root is not working, and suggest a better way to override CSS variables?

Thank you for your help.

root {
  --font-serif: 'Suisse Intl', system-ui;

.rich-text__editor {
  font-family: 'Suisse Intl', system-ui !important;
  • default discord avatar
    3 months ago

    Sorry guys, I forgot to add semicolon : before root. Now it's working perfect

    Thank you for all the hard work and dedication you have put into developing Payload CMS. The ease of use and flexibility of the platform is truly outstanding

Open the post
Continue the discussion in GitHub
Like what we're doing?
Star us on GitHub!


Connect with the Payload Community on Discord



Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.