reactjs - 如何样式反应自动完成输入框?
问题描述
我正在尝试在我的组件中使用 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,
};
我试图根据这个问题的答案添加样式,但它不起作用。 如何在反应自动完成中增加输入文本框的大小?
如何为输入框添加样式?
解决方案
提供给 prop 的对象inputProps
用作输入的 props,因此您可以提供一个具有style
包含您的属性的对象menuStyles
。
<Autocomplete
getItemValue={this.getItemValue}
items={this.state.autocompleteData}
renderItem={this.renderItem}
value={this.state.value}
onChange={this.onChange}
onSelect={this.onSelect}
inputProps={{ style: menuStyle }}
/>
推荐阅读
- android - 隐藏在键盘后面的 EditText
- python - 我们可以在 django 中使用 tornado 异步库在 django 视图中实现异步 Web 请求吗?
- sql-server - 并行聚集列存储索引构建
- c - 在 OpenCL 中检查两个字符向量是否相等?
- c# - 如何获取具有相同记录的列的行数
- java - 如何使用 ResponseEntity 返回 JSONObject 而不是 HashMap?(未找到类型返回值的转换器:类 org.json.JSONObject)
- sql - 如何在相关列上加入这两个选择语句 Microsoft SQL Server 2008
- java - 如何以编程方式将 JSON 转换为 JSON 模式以比较两个 json 对象的结构
- javascript - jquery javascript click函数中的函数
- perl - 模拟另一个模块内部使用的 Git 模块