How to override the default Plasmic styling with a CSS file?

Developer Support
1

Hi Team,
Is it possible to override the default Plasmic styling with a css file? (Codegen). I’ve tried overriding the css styles, but that didn’t seem to work.

image.png
image.png983×357 29.3 KB

image.png

image.png

2

Hey @cute_rodent, it is. I believe it’s just a matter of making your CSS selectors take precedence over .root_reset (https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) For example:

html .root_reset {
  font-weight: 700;
}

… should override .root_reset { font-weight: 400; }.

In the case of overriding specific elements, I think your code should work. p { color: red; } should turn paragraphs red unless there is a rule with higher specificity (e.g. .paragraph-class { color: blue; }.

3

Hi @tiago,
I’m probably missing something obvious, but I tried overriding it in index.css to no avail. I’ve also tried overriding the style props & class props in the body and root.

image.png
image.png1033×300 24.1 KB

image.png

image.png

image.png

4

image.png

5

@cute_rodent, can you try setting html .plasmic_flantify_root_reset__p27R0 { /* css rules */ }? (just replacing .root_reset with .plasmic_flantify_root_reset__p27R0)

6

@tiago Hmm. The green color shows up, but most text is not affected.

7

image.png

8

image.png

9

Hmmm, let me just try to understand your use case better; do you want to make all the texts in the page green? Maybe the easiest way to accomplish that would be to set * { color: green !important; }. Otherwise, internal elements will override your rules - that’s what is happening when you try to set <PlasmicHomepage style={{color: "green"}} />.

10

Hi Tiago,
The color green is just an indicator to see if the font has changed :slightly_smiling_face: (the non-green text indicates that the other css properties weren’t added)

11

For example, if you look at the section message, the top wasn’t affected by the change, but the bottom was.

12

Oh yeah, but I mean: what you want is to set font-family for all elements in the page, overriding all the styles you set in Plasmic?

13

Yes

14

I was able to override these custom components, but anything higher than that and I wasn’t able to.

15

image.png

16

Would * { color: green !important; } work for what you want to accomplish?

17

re: the green thing has the correct text (override), but the pending tasks image has the wrong font

18

I’ve tried !important in index.css, but to no avail.

19

image.png
image.png751×474 43.4 KB

20

Can you try with the * selector? Like * { font-family: ... !important; }