使用 styled-components 在 react-select 上设置高度不能按预期工作答案

【问题标题】：Set height on react-select using styled-components doesn't work as expected使用 styled-components 在 react-select 上设置高度不能按预期工作
【发布时间】：2019-12-16 12:08:37
【问题描述】：

我正在使用 react-select 3.0.8 和 styled-components 4.3.2，但是当我设置高度时，它显示为背景中的高度，而不是更改输入高度。

const SearchInput = styled(Select)`
  height: 90px;
  width: 590px;
  background: blue;
  border: none;
  font-family: "Monserrat", sans-serif;
  font-weight: medium;
  box-shadow: 0 1px 4px #444;
  border-radius: 4px;
  font-size: 22px;
  outline: none;
`;

....

<SearchInput
    value={selected}
    options={options}
    placeholder="Search a city"
    isSearchable="true"
    components={{ DropdownIndicator:() => null, 
      IndicatorSeparator:() => null }}
  />

【问题讨论】：

你确定 react-select 没有一些你设计的没有输入的包装器吗？
不，它没有。
是的，在 api 或这里查看：github.com/JedWatson/react-select/issues/1322
我看过这个文档，但没有一个涉及样式组件。这让我有点困惑。
你不能用 styled-components 设置这个组件的样式。使用你的组件 api。

标签： reactjs styled-components react-select

【解决方案1】：

我用过组件api：

const customStyles = {
 option: (provided, state) => ({
 ...provided,
 borderBottom: '1px dashed #ccc',
 color: state.isSelected ? 'white' : 'gray',
 padding: 2,
 fontSize: '20px',
}),
control: () => ({
 // none of react-select's styles are passed to <Control />
 width: 500,
 background: 'white',
 height: 50,
 radius: 40,
 borderRadius: 5,
 display: 'flex', 
}),
singleValue: (provided, state) => {
 const opacity = state.isDisabled ? 0.5 : 1;
 const transition = 'opacity 300ms';

 return { ...provided, opacity, transition };
}
}

要自定义高度，您可以在控件中更改高度值，控件代表栏，然后您可以使用 css 和 camelCasing 更改属性。然后在您的 react-select 组件中使用styles={customStyles} 导入自定义样式。

【讨论】：