[V2] Option to disable CSS-in-JSS entirely

[majelbstoat]

I have a NextJS app that is server side rendered, which uses the built in styled jsx. I'd really rather not have to add emotion-server to the application, just so there's no flash of unstyled select boxes. I would also much prefer to keep my style definitions to one system and one format.

I absolutely adore the functionality of react-select, but enforcing a specific CSS-in-JS solution for a component that will have to live within so many different kinds of environments seems like a misstep. IMO, the things it offers, like theming, should be done at an application- or framework-level, not a single component level.

Using className alone somewhat gets me there, but I now have two sets of CSS classes and two styling systems competing for primacy on the page, which is hard to debug, diagnose, and manage.

I realise that it's probably not going away, and assuming that is a non-starter, can we have the ability to just disable emotion, and do all the styling ourselves? That will be painful, but at least there will only be one authority.

[gwyneplaine]

@JedWatson this is a valid line of inquiry, and may be in lined with roadmap for an unthemed select export. Would be nice to get your thoughts on this.

This is a very valid point and a reason for me not currently upgrading to the latest version, I use this library in several projects and all implementations have custom styles, some of which already use CSS-in-JS libraries. I'm interested to find out the rational behind this decision?

[jharris4]

I'd also like to have a way to break the dependency on the emotion package for v2. I found this issue after reading the v2 upgrade guide's section of styling (https://react-select.com/styles), more specifically this paragraph:

While we encourage you to use the new Styles API, it's good to know that you still have the option of adding class names to the components to style via CSS.

It would be great to have an example/docs of how to style v2 using something like the react-select.css from v1.

If the ability to disable css-in-jss is added then it would be great to also show how to do that in the same example/docs section.

[wszgxa]

While we encourage you to use the new Styles API, it's good to know that you still have the option of adding class names to the components to style via CSS.

It's hard to add CSS by class name. Because emotion will add css in <style>....</style>. If you add CSS by <link rel="stylesheet" href="xx/main.css">, you must add many !important in your CSS file to rewrite the base css.

[edmorley]

This is a blocker for us using react-select unfortunately.

The use of emotion means:

• CSP violations since requires unsafe-inline (see also [V2] Request/Bug: Needs CSP Considerations  #2917)
• bundle size bloat (see https://bundlephobia.com/result?p=react-select@2.1.1)

If there was a (tree-shakeable) way to disable emotion when using react-select, it would avoid both issues.

[WitoTV]

This is as well blocking me from using react-select. I have all styles compiled to one style.css file so I would love to have an option to get rid of inline styles and see some normal classes not css-1hwfws3.

Using existing classes makes it really hard to even try to write my own styling that makes any sense...

Please give us option to disable CSS-in-JSS.

[eckdanny-osi]

The docs indicate react-select is friendly with css-modules. I too am looking to avoid translating a bunch of [s]css to css-in-js. Ideally I'd like to opt out of css-in-js entirely, style components with our existing sass constructs, and pass className mappings via props or context.

Does a working example of using css-modules exist?

[bbay]

is this open to consideration?
It would be really nice to have the option to either embrace css-in-js or disable it.

For projects that are not yet into the css-in-js craze it makes sense to just disable it and use the good 'ol stylesheets.

[simondiep]

I'm working on updating a legacy app from v1 to v2 and came across this issue. My component now looks really weird. Any chance backwards-compatibility could be added?