CSS for using react-select?

[DrewDennison]

Hello,

I'm using Blueprint and also react-select. Do you have any CSS to make the react-select inputs look like regular <inputs>?

Thanks!

[dmackerman]

Here's what we're using for now. It's not perfect by any means, but it'll get you started.

.Select-control {
  @include pt-input();
  height: 30px;
  padding-right: 5px;
  line-height: 28px;

  &:hover {
    box-shadow: 0 0 0 0 rgba(19, 124, 189, 0),
      0 0 0 0 rgba(19, 124, 189, 0),
      inset 0 0 0 1px rgba(16, 22, 26, 0.15),
      inset 0 1px 1px rgba(16, 22, 26, 0.2);
  }
}

.Select-input {
  height: 30px;
}

.Select-placeholder {
  height: 30px;
}

.Select--multi .Select-value {
  margin: 4px 3px 0 0;
  height: 24px;
  padding: 0;
  line-height: 24px;
  font-size: 12px;
}

.Select-placeholder,
.Select--single > .Select-control .Select-value {
  line-height: 30px;
}

.Select--multi .Select-value-label {
  padding: 0 10px;
}

.is-focused:not(.is-open) > .Select-control {
  box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
}

[DrewDennison]

Thank you so much! Any chance you have the CSS/SCSS for the dark theme?

[adidahiya]

We made a theme for react-select internally but are unsure if we want to support it officially in @blueprintjs going forward, especially given the potential of upcoming components as part of #118.

Nevertheless, I've thrown together a gist of our latest react-select styles in Sass and CSS: https://gist.github.com/adidahiya/483a2df9c4c4a554df9fdad70e0cde8d

[dmackerman]

Thanks @adidahiya, that's awesome! I'd agree that it's something that shouldn't make it into Blueprint proper, but a mention in the docs linking to that Gist isn't a bad idea. 😃

[giladgray]

I've been wanting to make some significant changes to those theme styles, mainly along the lines of expecting a custom optionRenderer that renders MenuItems (or whatever you want it to), rather than trying to re-style react-select's default items.

[bsr203]

@adidahiya can you please see the comment and let us know whether a file is missing. thanks.
https://gist.github.com/adidahiya/483a2df9c4c4a554df9fdad70e0cde8d

[neevany]

@adidahiya Thank you for the blueprint-react-select gist

but the gist is breaking after this commit (Refactor tags to support custom colors).
Error : @include tag("&"); ^ No mixin named tag
can you update the gist if you have it ?
Thanks.

[olivergeorge]

@adidahiya any chance there's a more recent version you can share. I think this that gist must have been before blueprint v3.

[adidahiya]

@olivergeorge no, we don't use react-select anymore. The @blueprintjs/select package has components which offer the same functionality.