Override base CSS in react-select component

Question

I am trying to override the .Select-control css component in react-select.

I want to set a custom height (the default is 36px) so it will look more closely to my other input fields

I have tried to add my own className prop as suggested in the docs however it does not seem to work and just pushes everything down (which makes sense since it's the wrapper for the component)

Is it possible to override the component itself?

Duwayne V. · Accepted Answer · 2017-08-08 19:59:34Z

1

I just started working with react-select and ended up overriding the components to bring the elements in line but also had success with passing in my own classes.

    .Select-control {
      height: 32px
    }

I noticed that some of the css selectors can be pretty specific so referencing the css file helped to make sure I overrode the included styles. If you're using ES6 syntax I think you need to import your css after importing the react-select css in order to override.

Hope that helps

answered Aug 8, 2017 at 19:59

Duwayne V.

265 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Override base CSS in react-select component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related