Bootswatch Support

[damienleroux]

Hello All!

I'am using a theme of bootstrap : bootswatch.

This theme overrides styles on tag "select" that's why it does not apply on react-select. too bad :(

Has anyone already modified react-select style to fit bootswatch theme?

Thank you for any response or help

[damienleroux]

For now I write something like that:

.Select-control{
    border: 0;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-left: 0;
    padding-right: 0\9;
  -webkit-background-size: 13px 13px;
    background-size: 13px;
    background-repeat: no-repeat;
    background-position: right center;
    -webkit-box-shadow: inset 0 -1px 0 #dddddd;
    box-shadow: inset 0 -1px 0 #dddddd;
    font-size: 16px;
    line-height: 1.5;
}

.is-open > .Select-control,
.Select-control:focus {
  -webkit-box-shadow: inset 0 -2px 0 #2196f3;
  box-shadow: inset 0 -2px 0 #2196f3;
  }

It works but I'm not sure I covers every use cases.

I don't close the post: I would like feedbacks on the best way to proceed with bootswatch :)

[gthomas-appfolio]

I think the best way to theme this component using Bootstrap/swatch is by applying the bootstrap classNames to each of the components used in react-select, then not including the default styles - but this may not be fully possible with the current code

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request is still relevant and you'd like us to review it, please leave a comment and we'll do our best to get back to you.