[英]Changing the height of a react-select component
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.
当我尝试修改 react-select 的高度时,它会弄乱内部文本的位置。 It doesn't appear their styles api lets me dig any deeper into control so I'm not sure how to fix this.
看起来他们的样式 api 并没有让我更深入地控制,所以我不知道如何解决这个问题。
Edit: I'd like to keep the padding.编辑:我想保留填充。
CodeSandbox: example of my question CodeSandbox: 我的问题示例
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} />;
所以你只需要移除填充物,它应该被修复。
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} />;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.