改变反应选择组件的高度

Question

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

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

任何想法如何更改组件的高度？

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

你可以在这里玩

Answer 1

花了几个小时，我最终得到了精确的 30px 高度的 react select with border 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 2

您可以将样式添加到选择组件的任何部分，查看相关文档

这是您要求的工作演示。

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

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

并在选择组件中：

<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 3

您无法使其小于 36px 的原因是dropdownIndicator和indicatorContainer（显示清晰的图标）在所有边上占用 20px（图标）+ 8px 填充。如果你减少填充，它minHeight就会真正起作用。

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

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

我注意到，由于 的原因，minHeight 不能低于 30px valueContainer，除非您更改其高度/填充。

Answer 4

CSS方式

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

<Select classNamePrefix="mySelect" />

.mySelect__value-container{
 height: 35px;
}

Answer 5

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

它不适用于小尺寸。

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

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