javascript - 单击它时防止展开 'React-select'

Question

我正在使用 react-select 库 https://react-select.com/home#getting-started .尝试将选择缩小到尺寸 width: 90px;高度:23px。但是，当您单击它时，选择增加。如何设置以上参数，让select的cay time为width: 90px;高度:23px?

此处演示:https://stackblitz.com/edit/react-sk7g4x

import Select from 'react-select'

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <Select options={options} />
    );
  }
}

CSS

.css-2b097c-container {
  width: 90px;
  height: 23px;
  font-size: 10px;
}

.css-yk16xz-control {
  min-height: 23px;
}

.css-1pahdxg-control {
  min-height: 23px;
}

.select__control--is-focused {
  min-height: 23px;
}

.css-tu25sd-control {
  height: 23px;
}

.selectSort .css-aohzbe-control {
  height: 23px;
}

.selectSort .css-1hwfws3 {
  padding: 0;
}

.css-tlfecz-indicatorContainer {
  padding: 0;
}

.css-yk16xz-control {
  height: 23px;
}

Answer 1

尝试使用 Prop classNamePrefix .如果你不使用它，react-select 会创建动态前缀名称，例如 css-tu25sd-c..他们不可靠。

<Select options={options} classNamePrefix='my-className-prefix' />

有关更多 Prop 信息，请参阅:https://github.com/JedWatson/react-select#props 编辑的解决方案。尝试使用 classNamePrefix Prop ，更新你的 css 以匹配动态 css 类并在你的编辑器中运行。

h1, p {
  font-family: Lato;
}

.css-2b097c-container {
  width: 90px;
} 

.my-className-prefix-container,
.my-className-prefix__control {
  width: 90px !important;
  height: 3px !important;
}

.my-className-prefix__value-container,
.my-className-prefix__indicator-separator,
.my-className-prefix__dropdown-indicator {
  position: relative;
  bottom: 8px;
}

.my-className-prefix__control--is-focused {
  height: 23px;
}

.select__control--is-focused,
.css-1pahdxg-control {
  min-height: 23px;
}

.my-className-prefix__placeholder,
.my-className-prefix__value-container,
.my-className-prefix__menu {
  font-size: 10px;
}

.css-yk16xz-control {
  min-height: 23px;
  max-height: 23px;
}