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

Question

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

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

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

更多道具信息见：https://github.com/JedWatson/react-select#props 编辑的解决方案。尝试使用 classNamePrefix 属性，更新 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;
}

Answer 2

您打算将高度限制为 23px 吗？我检查了你的 stackblitz 项目，发现里面 div 的高度大于 23px。 React-select 提供了一些 customization optionswe can use. Please check my forked version: https://stackblitz.com/edit/react-pmbsvv 来验证它是否是你需要的。

以下代码只是 index.js 文件的副本：

import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";
import Select from "react-select";

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

const customStyles = {
  control: (provided, state) => ({
    ...provided,
    height: 23,
    width: 90,
    minHeight: 23
  }),
  valueContainer: (provided, state) => ({
    ...provided,
    paddingTop: 0
  }),
  dropdownIndicator: (provided, state) => ({
    ...provided,
    height: 20,
    paddingTop: 0
  })
};
class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }

  render() {
    return (
      <Select
        options={options}
        styles={customStyles}
        classNamePrefix="my-className-prefix"
      />
    );
  }
}

render(<App />, document.getElementById("root"));

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

Prevent expands 'React-select' when click on it

javascript

css

reactjs

react-select