改变 react-select 组件的高度

Question

我正在使用 react-select 组件以及 bootstrap v4

所有bootstrap的东西似乎都是基于35px的高度，react-select组件的默认高度是38px，看起来有点奇怪。

知道如何更改组件的高度吗？

它使用了一些我以前从未遇到过的奇怪的 JS 样式库。我已经设法让它模仿焦点上的轮廓使用它，但高度逃脱了我，非常感谢任何帮助

可以玩玩here

Answer 1

您可以将样式添加到 select 组件的任何部分，查看相关 docs

这是您所要求的working demo。

在您的情况下，您需要添加的代码如下所示：

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

并且在 select 组件中：

<Select
          className="basic-single"
          classNamePrefix="select"
          defaultValue={colourOptions[0]}
          isDisabled={isDisabled}
          isLoading={isLoading}
          isClearable={isClearable}
          isRtl={isRtl}
          isSearchable={isSearchable}
          name="color"
          options={colourOptions}
          styles={customStyles}
 />

Answer 2

我能够重写菜单列表的 css 样式：

    /* over write css in react-select module */
    .Select__menu-list {
      max-height: 120px !important;
    }

Answer 3

CSS 方式

您可以指定 classNamePrefix 并用它来覆盖 CSS 样式。

<Select classNamePrefix="mySelect" />

.mySelect__value-container{
 height: 35px;
}

Answer 4

花了几个小时，我最终得到了反应的精确 30px 高度 select 和边框 1px:

  const customStyles = {
    control: (provided, state) => ({
      ...provided,
      background: '#fff',
      borderColor: '#9e9e9e',
      minHeight: '30px',
      height: '30px',
      boxShadow: state.isFocused ? null : null,
    }),

    valueContainer: (provided, state) => ({
      ...provided,
      height: '30px',
      padding: '0 6px'
    }),

    input: (provided, state) => ({
      ...provided,
      margin: '0px',
    }),
    indicatorSeparator: state => ({
      display: 'none',
    }),
    indicatorsContainer: (provided, state) => ({
      ...provided,
      height: '30px',
    }),
  };

Answer 5

如果您只想调整框的大小，请使用此选项。

.create-select {
    width: 160px;
    float: right;
    color: #000;
    [class$="ValueContainer"] {
        min-height: 28px !important;
        max-height: 28px;
    }
    [class$="IndicatorsContainer"] {
        min-height: 28px !important;
        max-height: 28px;
    }
    [class$="-Input"] {
        min-height: 28px !important;
        max-height: 28px;
        padding: 0px;
    }
    [class$="-control"] {
        min-height: 28px !important;
        max-height: 28px;

    }
}

Answer 6

我几乎无法使用 theme 属性将 Select 组件缩小到 32px（ 在我的浏览器 中）。当高度大于 45px 时效果很好。您也可以省略 baseUnit 属性。

它不适用于小尺寸。

  const theme = (theme: Theme) => ({
    ...theme,
    spacing: {
      ...theme.spacing,
      controlHeight: 30,
      baseUnit: 0,
    }
  });

<Select options={props.options} theme={theme}/>

Answer 7

你不能让它小于 36px 的原因是 dropdownIndicator 和 indicatorContainer（显示清晰的图标）总共占用了 20px（图标）+ 8px 的填充双方。如果你减少填充，minHeight 将实际工作。

dropdownIndicator: (styles) => ({
    ...styles,
    paddingTop: 7,
    paddingBottom: 7,
}),
clearIndicator: (styles) => ({
    ...styles,
    paddingTop: 7,
    paddingBottom: 7,
}),

您可以使用 dropdownIndicator 和 clearIndicator 的填充。

我注意到由于 valueContainer，您不能在 minHeight 中低于 30 像素，除非您更改它的 height/padding。

Answer 8

原因

.control 定义了 38px 的 min-height。

修复

将 .control 上的 min-height 更改为您想要的高度。

const customStyles = {
  control: (provided, state) => ({
    ...provided,
    minHeight: '30px',
    ...additionalStyles
  }),
};

改变 react-select 组件的高度

Changing height of react-select component

reactjs

react-select

CSS 方式