react-select：禁用默认样式

【问题标题】：react-select: disable default stylesreact-select：禁用默认样式
【发布时间】：2021-07-06 15:13:57
【问题描述】：

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

脚本：

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

【问题讨论】：

标签： javascript html css reactjs typescript

【解决方案1】：

.header__select{
  height: 64px;

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

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

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

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

并在Select 组件中申请：

styles={customStyles}

应用height: 64px 将如下所示：

在CodeSandbox查看详细演示

【讨论】：