0

I've been trying to customize React-select elements but they are all getting these "css-xxx" prefixes as such : class="user-select css-b62m3t-container"

I dont know where thats coming from (could be Next.js) and I have been asked to modify theses elements using classes but not using those hashes. I've tried this (user-select is my AsyncSelect className):

.user-select {
    .control {
        border-radius: 0.375rem !important;
        border: 1px solid #d2ddec;
    }
    .control:focus {
        border-radius: 0.375rem !important;
        border: 1px solid #d2ddec;
    }
}

and this aswell :

.user-select {
    &__control {
        border-radius: 0.375rem !important;
        border: 1px solid #d2ddec;
    &--is-focused {
    border-radius: 0.375rem !important;
        border: 1px solid #d2ddec;
    }
}

as described here How to style react-select options but I have not managed to modify these css properties other than by giving the "css-hash" class names in my scss file.

I would appreciate if you guys could help me understand where these hashes are coming from and what am I doing wrong.

Thanks in advance !

badakzz
  • 35
  • 6

1 Answers1

1

Those hash classes are CSS-in-JS classes created by @emotion, and part of the core library. You use the style override functions to create additional component styles or add additional classes to individual components.

Steve -Cutter- Blades
  • 5,057
  • 2
  • 26
  • 40