React Aria Components with Spectrum CSS

[cheema-corellian]

Folks,

I am new to Spectrum, so please forgive me if I am asking a noob question. We are looking to adopt Spectrum as our primary design system for our React app. However, there are times when we would need to modify the style a little. This is generally discouraged for react-spectrum components. And react-aria is great for this. And we are looking to use it. But when it comes to creating styles for it, we'd much prefer it we could use spectrum-css as the base as we generally like it. And then make a few modifications by augmenting spectrum-css where needed.

spectrum-css has CSS variables declared like this for the button component:

/* default for all buttons */                                                                                                                                     
.spectrum-Button {
   --spectrum-button-animation-duration: var(--spectrum-animation-duration-100);
   --spectrum-button-border-radius: var(--spectrum-corner-radius-100);
   --spectrum-button-border-width: var(--spectrum-border-width-200);
   --spectrum-button-line-height: 1.2; /* Hack to keep buttons at 32px */   
   ...
}

We would prefer not to have to sort this out for all components in react-aria and just adopt 99% of the CSS from Spectrum with the ability to override it when absolutely needed.

Is this possible? What is the recommended method for accomplishing this? Or are we going about it the wrong way?

Thanks in advance.

[reidbarber]

Unfortunately, customizing the React Spectrum theme isn't officially supported. You can read more about why this is the case in #3370 and #3624.

If you fork the project and change the values, things may behave unexpectedly and you won't be able to easily get updates, so I wouldn't recommend that either.

I would recommend starting out with one of the React Aria starter kits, and going from there.

[cheema-corellian]

@reidbarber Thanks. That was helpful!