[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 [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?

[sedenardi]

This issue and the bundle size issue mentioned in #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.

[hcharley]

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 😄

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

[ebonow]

Greetings,

A solution has been posted here to disable the default styles: #2872 (comment) While the generated classNames will still be present in the DOM, the corresponding styles will not be added to the page.

const styleProxy = new Proxy({}, {
    get: (target, propKey) => () => {}
});

<Select styles={styleProxy} {...} />

Here is a working demo to illustrate it: codesandbox

This should satisfy this condition such that this issue can be closed. If anyone has any other questions or concerns, feel free to reply and this can be re-opened if necessary.

[timakhalaya]

Greetings,

A solution has been posted here to disable the default styles: #2872 (comment) While the generated classNames will still be present in the DOM, the corresponding styles will not be added to the page.

const styleProxy = new Proxy({}, {
    get: (target, propKey) => () => {}
});

<Select styles={styleProxy} {...} />

Here is a working demo to illustrate it: codesandbox

This should satisfy this condition such that this issue can be closed. If anyone has any other questions or concerns, feel free to reply and this can be re-opened if necessary.

This approach in no good at all

[Methuselah96]

We're planning on create an "unstyled" version of react-select where you can bring your own styles (or turn them off completely).

[timakhalaya]

We're planning on create an "unstyled" version of react-select where you can bring your own styles (or turn them off completely).

That would solve a ton of issues then 🚀

[loicnestler]

@Methuselah96 is there any ETA for this?

Edit:
I just found out about this trick (Link to CodePen by @ebonow):

const styleProxy = new Proxy(
  {},
  {
    get: (target, propKey) => () => {}
  }
);

const App = (props) => {
  return <Select styles={styleProxy} options={basicOptions} />;
};

And then proceed to style the select box using classNames.

Should work for now, in case anyone also needs react-select unstyled.

[Methuselah96]

No, there's no ETA at the moment. The top two priorities are fixing menu positioning and creating an unstyled version but it's hard to estimate how soon we can finish those up since the amount of time we can work is not always consistent.

[zedtux]

@Methuselah96 any progress on that "unstyled" version please ?

[Uni2K]

How is it going with the unstyled version? It would be great to have a prop to disable "emotion css" completely.

[addlistener]

I guess this is still relavant?

Especially if you need your own instance of emotion there's conflict

emotion-js/emotion#2383
#4780
#4541

And this package is outdated.
https://www.npmjs.com/package/react-select-no-emotion