React-select: Is there a list of classNames available?

Created on 7 Jul 2019 · 6Comments · Source: JedWatson/react-select

I've been looking through the documentation for a page on all the css variables or classNames available to modify the component and style it. I am implementing styled-components so I want to edit the styles using the class names and it's difficult to get them all from the DOM alone as some only pop up when you click it etc and it takes a unreasonable amount of time without documentation on the class names.

Where can i find all the classNames if there is any?

categorquestion issureviewed

Source

ZarifS

👍1

Most helpful comment

These are not the classNames though they are the names for the styles API. I am specifically looking for the css-class names which get generated when you render it in the web. <... class='input-selector'> for example. I need this for the styled-components as it targets the actual class names being generated.

Right now like I mentioned I can only see what these names are from using the inspect element tool to find them, there should be a documentation specifying what they all are.

ZarifS on 15 Jul 2019

👍5

All 6 comments

Looking into the code might help:
https://github.com/JedWatson/react-select/blob/master/packages/react-select/src/styles.js

The default styles are referenced right there too via imports.

kkkrist on 11 Jul 2019

Right now like I mentioned I can only see what these names are from using the inspect element tool to find them, there should be a documentation specifying what they all are.

ZarifS on 15 Jul 2019

👍5

I don't think it is possible reliably to style via CSS classes, because they seem to be generated by the underlying CSS-in-JS library.

I also found my way here because I was looking for a Select-component that's styleable via regular CSS classes. If anyone knows of such a component, let us know!

codeclown on 5 Dec 2019

You can apply the classNamePrefix prop which in result applies classes in the format [classNamePrefix]__[className] to nearly every DOM element associated with a component.

The className is in the most cases the name of the component lower-cased and pascal-case converted to hyphenation (ValueContainer -> __value-container), but some will have different names, so it’s best to look through the DOM after applying the prop.

Rall3n on 11 Dec 2019

@Rall3n but they don't override default styles.

amitquoine on 3 Feb 2020

👍2

As @Rall3n mentioned, using classNamePrefix can expose the classNames for most all of the components.

I believe this is a pretty comprehensive list of classNames.

[prefix]__clear-indicator

[prefix]__control

[prefix]__dropdown-indicator

[prefix]__group

[prefix]__group-heading

[prefix]__indicator

[prefix]__indicators-container

[prefix]__indicator-separator

[prefix]__input

[prefix]__loading-indicator

[prefix]__menu

[prefix]__menu-list

[prefix]__menu-portal

[prefix]__menu-notice

[prefix]__menu-notice--loading (LoadingMessage)

[prefix]__menu-notice--no-options (NoOptionsMessage)

[prefix]__multi-value

[prefix]__multi-value__label

[prefix]__multi-value__remove

[prefix]__option

[prefix]__placeholder

[prefix]__single-value

[prefix]__value-container

[prefix]__value-container--is-multi

In regards to being unable to override default styles, this simply is not accurate though in some cases you might need to add specificity by adding a className prop, or when necessary, you can use !important. One such case is overriding the opacity of the input so it's never hidden.

Here is an example codesandbox showing styles being overridden entirely by classNames.

If there are other questions or concerns, I can reopen this, but will close this for now to focus on more current issues.