如何样式化反应自动完成输入框？

Question

我正在尝试在我的组件中使用 react-autocomplete。 一切正常，结果显示。 但我无法设置默认输入框的样式。 这是自动完成的

<Autocomplete 
getItemValue={this.getItemValue}
items={this.state.autocompleteData}
renderItem={this.renderItem}
value={this.state.value}
onChange={this.onChange}
onSelect={this.onSelect} 
menuStyle={menuStyle}
/> 

下拉菜单的样式工作正常。

const menuStyle = {
  borderRadius: '3px',
  boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)',
  background: 'rgba(255, 255, 255, 0.9)',
  padding: '2px 0',
  fontSize: '90%',
  position: 'fixed',
  overflow: 'auto',
  maxHeight: '50%', // TODO: don't cheat, let it flow to the bottom
  "zIndex": 100,
};

我试图根据这个问题的答案添加样式，但它不起作用。 如何在反应自动完成中增加输入文本框的大小？

如何为输入框添加样式？

Answer 1

提供给 prop inputProps的对象用作输入的道具，因此您可以提供一个带有包含menuStyles的style属性的对象。

<Autocomplete
  getItemValue={this.getItemValue}
  items={this.state.autocompleteData}
  renderItem={this.renderItem}
  value={this.state.value}
  onChange={this.onChange}
  onSelect={this.onSelect}
  inputProps={{ style: menuStyle }}
/>

Answer 2

inputProps={{ style: menuStyle }}

或者你可以做

styling={
  borderRadius: '3px',
  boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)',
  background: 'rgba(255, 255, 255, 0.9)',
  padding: '2px 0',
  fontSize: '90%',
  position: 'fixed',
  overflow: 'auto',
  maxHeight: '50%', // TODO: don't cheat, let it flow to the bottom
  "zIndex": 100,
  }