0

I'm trying to use the css approach for styling react-select (v3) but with no success. I do get the wrapping container to style, but the inner stuff does does not even show up in dev tools as applied and overridden by the component itself. Nothing. Why is this and what am I doing wrong?

In my component where I use it, I only import the component itself

import CreatableSelect from "react-select/creatable";

<CreatableSelect
            value={this.getCurrentValue(this.state.value, this.state.options)}
            options={this.state.options}
            placeholder={this.props.formComponentData.placeholder}
            onChange={e => this.handleChange(e.value)}
            onCreateOption={this.handleCreate}
            menuIsOpen={true}
            className="select-search-container"
            classNamePrefix="select-search"
          />

my scss is imported in my main.scss

@import '../components/SelectSearch';

so the background-color applies and position if I use !important, the .select-search__control is a no show even with !important

.select-search-container {
  position: sticky;
  background-color: deepskyblue;
}

.select-search__control {
  height: 2.75rem;
  padding: 0 measure(half) !important;
  border: 1px solid red !important;
  background-color: deepskyblue !important;
  border-radius: 0 !important;
}

Any ideas on why?

Dejan.S
  • 18,571
  • 22
  • 69
  • 112
  • `react-select` uses `style-in-JS`, I highly recommend you to try their way instead of using `css` --> https://react-select.com/styles – Laura Nov 25 '19 at 03:27
  • What className is your element getting? If you can reproduce the issue in a codepen (or similar) I or someone else could probably help solve it. But I recommend the built-in way of styling as recommended by the above commenter. – sanjsanj Dec 31 '19 at 09:36
  • I have an answer for the built in css-in-js route https://stackoverflow.com/a/54961373/2466477 – sanjsanj Dec 31 '19 at 09:37

0 Answers0