Changing the height of a react-select component

Question

I have a relatively straight forward question. When I try to modify the height of a react-select it messes up the position of the internal text. It doesn't appear their styles api lets me dig any deeper into control so I'm not sure how to fix this.

Edit: I'd like to keep the padding.

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

This should work for you:

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} />;