Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Styling Select component with CSS className

See original GitHub issue

Hi, I’m trying to style the Select component like written in the DOCS but adding a class with className does not work. The class tag is added to the DOM element’s classes but doesn’t affect the element itself. The theme stay the same.

If I add a class like this:

<Select
    className='my-class'
    {...selectProps}
/>

The DOM element looks like this:

<div class="my-class css-2b097c-container">
...
</div>

Which means that the default class css-2b097c-container of react-select will always “overide” my custom class. I’ve tried to use the classNamePrefix option but did not work either 😦

In order to keep my UI design complete I need to design it with classes and not with inline styling!

Please help me solve this, THANKS 😃

Issue Analytics

State:
Created 3 years ago
Comments:10 (1 by maintainers)

Top GitHub Comments

12reactions

ebonowcommented, Oct 3, 2020

Greetings @omersname

This is an issue of CSS specificity.

Using className and classNamePrefix, you would be able to override the default theme.

<Select className="react-select" classNamePrefix="react-select" ... />

.react-select .react-select__control {
    width: 6rem;
}

Another CSS trick of the trade is that you could simply repeat a className for extra specificity.

.react-select__control.react-select__control {
    width: 6rem;
}

4reactions

Rall3ncommented, Jun 4, 2021

@khooz Rearranging classes on the HTML elements would have no effect. And this is not a bug per se, but the default behavior of how CSS is parsed in the document.

react-select uses emotion to style its components. This CSS-in-JS library appends styles to the end of the <head> element, giving those styles a higher priority over your styles in a stylesheet as they appear later.

But there is a solution that is not a simple workaround. You can change the default behavior of emotion by setting the prepend option in a custom cache to prepend styles to the beginning of the <head> element. This should give your stylesheet styles a higher priority.

import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';

const cache = createCache({
    key: 'my-select-cache',
    prepend: true
});

...

<CacheProvider value={cache}>
    <Select {...} />
</CacheProvider>

Top Results From Across the Web

styling react-select using classes

The DOM structure of react slect is shown in the link. How can I style the react-select using classNames? Can anyone show a...

Styles

Overriding the theme. Examples. Styles. React Select offers 3 main APIs for styling: The styles prop; The classNames prop; The classNamePrefix prop ...

CSS Class Selectors: How to Use to Style an HTML Element

Do you want to stylize HTML elements without hassle? CSS classes will help you do the job! Here, you'll learn how to use...

CSS .class Selector

To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify...

Class selectors - CSS: Cascading Style Sheets | MDN

The CSS class selector matches elements based on the contents of their class attribute.