react-select: disable default styles

How to disable default react-select styles ? react-select is not in the center of container, that’s why i must use margin-bottom, but it’s not good solution. without margin-bottom: without margin-bottom css

.header {
  height: 98px;
  display: flex;
  justify-content: space-between;
  background-color: #222968;
  align-items: center;
  padding: 0 10px;
}

.header__title {
  font-weight: 700;
  color: white;
}

.header__select{
  height: 64px;
  width: 169px;
  margin-bottom: -30px;
}

Script:

import * as React from 'react';
import Select from 'react-select';

const options = [ 
  { value: 'userName', label: 'username' },
  { value: 'logout', label: 'logout' },
]

export class Header extends React.Component {
  render() {
    return (
      <div className='header'>
        <span className='header__title'>Task Assistant Service</span>
        <Select
          className='header__select'
          options= {options}
        />
      </div>
    );
  }
}

Answer

.header__select{
  height: 64px;

Here your height setting is causing the problem.

If you remove the height it’ll be perfectly centered. So, you don’t have to change the margin.

enter image description here.

And if you want to set custom height. Then you have to use a custom style like:

const customStyles = {
  control: base => ({
    ...base,
    height: 64,
    minHeight: 64
  })
};

And apply in Select component like:

styles={customStyles}

Applying height: 64px will look like this:

enter image description here

Check detailed demo at CodeSandbox