React-select: remove _emotion.css

Created on 17 Oct 2018 · 7Comments · Source: JedWatson/react-select

Just now I update react select to V2, and I want to keep my css styles in css files. From now I have no idea how to do it.
I found it come from 'react-select/lib/components/containers.js' from function 'var IndicatorsContainer = exports.IndicatorsContainer = function IndicatorsContainer(props)'. There is no option how to remove '_emotion.css'.

It will be really cool, if you will allow to do it. Otherwise, I need to override this injected styles 'somehow'.

Source

degr

👍8

Most helpful comment

Actually, I don't wanna see something like this on my project:

degr on 17 Oct 2018

👍6

All 7 comments

Actually, I don't wanna see something like this on my project:

degr on 17 Oct 2018

👍6

why not tho

klarstrup on 19 Oct 2018

Personally I don't want emotion/CSS-in-JS too. I want to manage the CSS in CSS files, not in JavaScript. I also don't like the generated random-string class names either.

lvl99 on 8 Feb 2019

👍5

I managed to figure it out:

const NOOP = () => {};
const NOOP_REACT_SELECT_STYLES = {
  clearIndicator: NOOP,
  container: NOOP,
  control: NOOP,
  dropdownIndicator: NOOP,
  group: NOOP,
  groupHeading: NOOP,
  indicatorsContainer: NOOP,
  indicatorSeparator: NOOP,
  input: NOOP,
  loadingIndicator: NOOP,
  loadingMessage: NOOP,
  menu: NOOP,
  menuList: NOOP,
  menuPortal: NOOP,
  multiValue: NOOP,
  multiValueLabel: NOOP,
  multiValueRemove: NOOP,
  noOptionsMessage: NOOP,
  option: NOOP,
  placeholder: NOOP,
  singleValue: NOOP,
  valueContainer: NOOP
};

// Then use like so...
<ReactSelect styles={NOOP_REACT_SELECT_STYLES} />

lvl99 on 8 Feb 2019

👍1

From my experience, react select v2 contains elements which still use styles, but which are not present in documentation. So, this hack can't cover everything.

degr on 8 Feb 2019

Yes, looks like there are still some styles, the hack's not entirely comprehensive...

lvl99 on 8 Feb 2019

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!