改变反应选择组件的高度

Question

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

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

有什么想法可以改变组件的高度吗？

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

你可以 在这里 玩

原文由 DrogoNevets 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

这是您要求的 工作演示。

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

 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}
 />

原文由 Erez Lieberman 发布，翻译遵循 CC BY-SA 4.0 许可协议

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}
 />

原文由 Erez Lieberman 发布，翻译遵循 CC BY-SA 4.0 许可协议