使用样式化组件在react-select上设置高度无法正常工作

Question

我正在使用react-select 3.0.8和样式组件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 }}
  />

Answer 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}导入自定义样式。