react-select：禁用默认样式

Posted 2023-02-22

【中文标题】react-select：禁用默认样式

【英文标题】：react-select: disable default styles

【发布时间】：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>
    );
  

【参考方案1】：

.header__select
  height: 64px;

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

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

.

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

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

并在Select 组件中申请：

styles=customStyles

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

在CodeSandbox查看详细演示