使用 styled-components 在 react-select 上设置高度无法按预期工作

Question

我正在使用 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 }}
  />

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 和驼峰式大小写更改属性。然后在你的 react-select 组件中使用 styles={customStyles} 导入自定义样式。

使用 styled-components 在 react-select 上设置高度无法按预期工作

Set height on react-select using styled-components doesn't work as expected

reactjs

react-select

styled-components