更改react-select组件的高度

Question

我有一个相对直接的问题。当我试图修改react-select的高度时，它会弄乱内部文本的位置。他们的风格api似乎不能让我更深入地挖掘控件，所以我不确定如何解决这个问题。

编辑:我想保留填充。

CodeSandbox：example of my question

​

​

import React from "react";
import Select from "react-select";

const customStyles = {
  control: provided => {
    return {
      ...provided,
      width: "100%",
      padding: "10px 12px",
      height: "20px"
    };
  }
};

export default () => <Select styles={customStyles} />;

Answer 1

因此，您只需要删除填充，它应该是固定的。

Answer 2

这对你来说应该是可行的：

import React from "react";
import Select from "react-select";

const customStyles = {
  control: provided => {
    return {
      ...provided,
      width: "100%",
      padding: "0px 12px",
      height: "20px"
    };
  }
};

export default () => <Select styles={customStyles} />;