'How to customise React AsyncSelect style

I am trying to customise the style of AsyncSelect component, but seems not able to do it.

import AsyncSelect from 'react-select/async';
<AsyncSelect
  classNamePrefix='testSelect'
  ......
/>

scss file: Both ways are not working

.testSelect__menu {
  box-shadow: 5px 5px 15px -5px #ccc, -5px 5px 15px -5px #ccc !important;
  background-color: black !important;
  z-index: 10 !important;
}

.testSelect {
  &__menu {
    box-shadow: 5px 5px 15px -5px #ccc, -5px 5px 15px -5px #ccc !important;
    background-color: black !important;
    z-index: 10 !important;
  }
}

Anyone knows how to solve the issue? Thanks in advance.

cssreactjsselectreact-component


Solution 1:[1]

I have made a codesandbox & the css class testSelect__menu is applied to the inner elements. Which results in the output -

enter image description here

Maybe you want to look into if scss is configured correctly or not?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Aseem Gautam

Related Questions