javascript - react-select：禁用默认样式

Question

如何禁用默认的反应选择样式？react-select 不在容器的中心，这就是我必须使用的原因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;
}

脚本：

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>
    );
  }
}

标签： javascripthtmlcssreactjstypescript

Answer 1

.header__select{
  height: 64px;

在这里，您的height设置导致了问题。

如果您删除高度，它将完全居中。因此，您不必更改边距。

.

如果你想设置自定义高度。然后您必须使用自定义样式，例如：

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

并应用在Select组件中，例如：

styles={customStyles}

申请height: 64px将如下所示：

在CodeSandbox查看详细演示