改变反应选择组件的高度 [英] Changing height of react-select component

问题描述

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

I am using the react-select component along with bootstrap v4

所有的 bootstraps 看起来都是基于 35px 的高度，react-select 组件的默认高度是 38px，这看起来有点奇怪.

all of bootstraps stuff is based on 35px height it seems, the default height of the react-select component is 38px, which looks a little odd.

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

Any ideas how I can change the height of the component?

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

It is using some weird JS styling library I have never come across before. I have managed to get it to mimic the outline on focus using it, but the height escapes me, any help much appreceiated

您可以在这里

推荐答案

你可以将你的样式添加到 select 组件的任何部分，看看相关的 文档

You can add your styles to any part of the select components, take a look at the relevant docs

这是您要求的工作演示.

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

In your case the code that you need to add will look something like this:

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

这篇关于改变反应选择组件的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！