Question

我正在将react-select组件与bootstrap v4一起使用

所有bootstraps的内容都是基于35px的高度，react-select组件的默认高度为38px，这看起来有些奇怪。

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

它正在使用一些我从未见过的怪异JS样式库。我设法使用它来模仿轮廓上的轮廓，但是身高却逃不过我的任何帮助

您可以here使用它

Answer 1

花费几个小时，我最终得到的是带有边框1px的react select的准确30px高度：

  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

这是您要的working demo。

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

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

CSS方式

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

<Select classNamePrefix="mySelect" />

.mySelect__value-container{
 height: 35px;
}

Answer 4

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

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

之所以不能使其小于36像素，是因为dropdownIndicator和indicatorContainer（显示清晰图标）在所有面上都填充20像素（图标）+ 8像素的填充。如果您减少该填充，则minHeight实际上会起作用。

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

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

我注意到，由于valueContainer的影响，minHeight不能低于30像素，除非您更改其高度/填充。

Answer 6

我能够覆盖菜单列表的CSS样式：

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

Answer 7

render() {
const customStyles = (width = 100, height = 40) => {
    return {
        container: (base) => ({
            ...base,
            display:'inline-block',
            width: width,
        }),
        valueContainer: (base) => ({
            ...base,
            minHeight: height,
        })
    }
}

return (
    <Select
      styles={customStyles}
      options={...}
    />
);

}

Answer 8

使用theme属性，我几乎无法将baseUnit组件缩小到32像素（在浏览器中为）。当高度大于45像素时，效果很好。您也可以省略const theme = (theme: Theme) => ({ ...theme, spacing: { ...theme.spacing, controlHeight: 30, baseUnit: 0, } });属性。

它不适用于小尺寸。

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

{{1}}

更改反应选择组件的高度

8 个答案:

CSS方式