How do I change css properties of a class

[conormdowney]

Im wondering if someone can help me with how to change css properties of spectrum classes.

The example ive been using is, for the class _spectrum-Textfield-input_61339 Im trying to update the font-family to Times New Roman (not an actual use case, just for testing).

Im not very well versed in css, so please bear with me.

i made a css class and i import it in my react app. That doesnt do anything. If I make the property !important it works.

It seems like the spectrum css is loaded in after my one. Is my issue then just a build problem, in that i should be loading my css after spectrums?
Or is there a method for doing this?

[snowystinger]

So there are a few things to consider here.

• Please don't override things if they are hard to override, they typically are that way because we're trying to enforce a Design System.
  • To this note, we use CSS Modules to make it harder to override, so if you're using a classname such as _spectrum-Textfield-input_61339, that hash on the end will change anytime we update that file, meaning that you could be using a broken selector
• For most things you need to style within the context of the Design System, check https://react-spectrum.adobe.com/react-spectrum/styling.html
• You're running into a specificity issue, I recommend reading up on this topic, it's not always obvious https://css-tricks.com/specifics-on-css-specificity/ with the caveat that maybe you shouldn't be overriding that property if it's hard to do so

If you are a non-adobe employee, we also have stately and aria hooks that power all of our components behaviors, you could provide your own rendering on top of that if you need to make changes that our Design System doesn't allow.

[conormdowney]

So Im not getting an error anymore but it doesnt seem to use my custom defined var but im configuring it wrong. the value in the const that im adding to the theme was

const overrideGlobal = {"--spectrum-alias-font-size-default": "70px"}

that wont work cos its defined in this css file (https://github.com/adobe/react-spectrum/blob/main/packages/%40adobe/spectrum-css-temp/vars/spectrum-global.css) under a class.

so I chanced my arm and tried

const overrideGlobal = {".spectrum--medium,.spectrum--large" : `{--spectrum-alias-font-size-default": "70px"}`}

but that doesnt work. so how do I define a variable value inline?

[snowystinger]

you don't define it inline, or if you do, you do it in a style tag or in a style object

// this is what importing css files into js will do, but it'll add it to the head of the document, whereas you could technically render this anywhere
<style>
.myOverrideVars {
  --spectrum-alias-font-size-default: 70px;
}
</style>
<div style={{'--spectrum-alias-font-size-default': '70px'}} >...</div>

I don't recommend the two options above, the div one won't propagate through a portal and the style one would be odd because it's not in the head with the rest of the css.

the object you pass to a Provider should have a classname only in it, no styles, and it should match the classname in the css file is where you do define the variable

[conormdowney]

Thats what I tried when i chanced my arm:

const overrideGlobal = {".spectrum--medium,.spectrum--large" : `{--spectrum-alias-font-size-default": "70px"}`}

I got that class name(s) from the spectrum_global.css file. so am i on the right track there? am I setting the value of the object incorrect?

[snowystinger]

I think this will clear things up https://codesandbox.io/s/mutable-moon-u8d8j?file=/src/App.js

[conormdowney]

That is awesome. Thank you so much. I was totally misreading. I thought the myOverrideVars was just you using an example class like TestClass or something. Thanks so much for your time and patience. You're a champ!!