更改反应选择组件的高度

Question

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

所有 bootstraps 的东西似乎都是基于 35px 高度，

react-select

组件的默认高度是 38px，这看起来有点奇怪。

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

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

你可以在这里玩它

Answer 1

花了几个小时，我最终得到了这个，以获得精确的 30px 高度的反应选择，边框为 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

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

这是您所要求的工作演示。

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

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

的填充。

我注意到，由于

valueContainer

，你的 minHeight 不能低于 30px，除非你改变它的高度/填充。

Answer 4

CSS方式

您可以指定

classNamePrefix

并使用它来覆盖 CSS 样式。

<Select classNamePrefix="mySelect" />

.mySelect__value-container{
 height: 35px;
}

Answer 5

我几乎无法使用

Select

属性将 theme 组件设置为小至 32px（

在我的浏览器中

）。当高度大于 45px 时效果很好。您还可以省略

baseUnit

属性。

它不适用于小尺寸。

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

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

Answer 6

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

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

Answer 7

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

.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 8

原因

.control

定义了

min-height

38px

。

修复

将

min-height

上的

.control

更改为您想要的高度。

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

Answer 9

就我而言，我必须为类设置 css height 属性

__value-container

这是代码：

.react-select__value-container {
    height: 3rem;
}

Answer 10

export const customStyles = {
  control: (provided: Record<string, unknown>, state: any) => ({
    ...provided,
    height: 42,
    boxShadow: 'none',
    borderColor: 'none',
    '&:hover': {
      color: '#60B3D1'
    },
    border: state.isFocused ? '1.5px solid #60B3D1' : '1.5px solid #cbd5e1'
  }),
  option: (styles: any, state: any) => ({
    ...styles,
    color: state.isSelected ? '#FFF' : styles.color,
    backgroundColor: state.isSelected ? '#60B3D1' : styles.color,
    borderBottom: '1px solid rgba(0, 0, 0, 0.125)',
    '&:hover': {
      color: '#FFF',
      backgroundColor: '#60B3D1'
    }
  }),
  input: (base: any) => ({
    ...base,
    'input:focus': {
      boxShadow: 'none',
      border: '1px solid #60B3D1'
    }
  }),
  menuPortal: (base: any) => ({ ...base, zIndex: 9999 })
}


<Select styles={customStyles } />

这对我来说真的很有效

Answer 11

对于反应选择输入视图，您可以使用如下样式：

<Select
....
styles={{
          control: (styles) => ({
            ...styles,
            height: "40px",
            backgroundColor: "white",
            borderRadius: "4px",
            outline: 0,
            border: 0
          }),
        }}
/>

对于菜单高度，您可以使用这个：

<select 
        maxMenuHeight={200}
        minMenuHeight={10}
/>