React-select: [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.

[ghost]

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 #2917)
• bundle size bloat (see https://bundlephobia.com/[email protected])

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?

[sedenardi]

This issue and the bundle size issue mentioned in https://github.com/JedWatson/react-select/issues/2972 have led our team to hold off indefinitely from upgrading to V2. Unfortunately I don't have any experience with emotion, so don't feel comfortable submitting a PR to address the issue (nor do I know if it would be accepted, given the lack of comment from contributors to this issue).

We love this package and are very grateful for all the hard work the contributors have put into it.

[ArranJacques]

This makes working with react-select incredibly frustrating as it forces an opinionated way of styling the components on you. It would be incredibly useful to have an option to disable css-in-js completely and instead just pass standard class names to the components. This then gives us the freedom to choose how we style the components.

[lukewhitmore]

I wholeheartedly agree .. we need to be able to disable CSS-in-JS.

The fact that this route has been chosen, and is impossible to override has stopped us from using react-select.

[charlex]

Emotion seems to be racking up performance hits in my tests. Would be nice if there was a way to simply turn it off.

Perhaps there could be a webpack plugin that excludes emotion and we maintain a community CSS file?

[jharris4]

In case it helps anyone, I literally just forked react-select at version 1.30 into a new package called react-select-css, and also upgraded the components to no longer use deprecated lifecycles (warnings in React 16.9).

I haven't gotten around to making a README etc, but it's published to npm and working great for me: https://www.npmjs.com/package/react-select-css

[StarpTech]

Great issue and I experience the same. I don't want to use a component that adds unnecessary complexity / size to my application.

By the way, that is the big strength of Cascading StyleSheet that you aren't coupled to the specific component :smile:

Providing only a default theme in a SASS file and working with className and classNamePrefix would be great.

• In emotion, you could use https://emotion.sh/docs/nested
• In styled-components https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting

This approach would be compatible with CSS and CSS-in-js solutions without adding any overhead.

Example in CSS/SASS

<style>
.react-select {
   padding: 4px;
 }
  .react-select .sub-component {
  }
</style>

<Select></Select>

Example in styled-components with nesting

const Thing = styled.div`
  .react-select {
    padding: 4px;
  }
  .react-select .sub-component {
  }
`
<Thing>
    <Select></Select>
</Thing>

Example in emotion with nesting

const select = css`
  .react-select {
    padding: 4px;
  }
  .react-select .sub-component {
  }
`
<Select css={select}></Select>

[onionhammer]

This library doesn't work too well with CSS modules OOTB as far as I can tell.

In React if I import styles via

import styles from './some.module.css'

there is no effective way to utilize the styles to style the react-select.

[gregmartyn]

@onionhammer we're able to get it to work with what feels like a hack:
jsx:

<Select
    className={style.location}
    classNamePrefix={style.location}

and in css

.location {
    {rules for the select itself here}
    & .location__control {
        {rules for the select's control here}
    }
}

more info https://react-select.com/styles#using-classnames