reactjs - 在 react-bootstrap-table2-toolkit 搜索栏中有字体真棒搜索图标
问题描述
使用 react-bootstrap-table2 进行表和搜索,如下所示
<ToolkitProvider
bootstrap4
keyField='id'
data={data}
columns={columns}
search
>
{props=>(
<>
<SearchBar {...props.searchProps} placeholder='Start typing'/>
<br/>
<BootstrapTable condensed bordered
id='bootstrap-tr'
{...props.baseProps}
noDataIndication={() => 'There is no data to display'}
loading={loading}
overlay={overlayFactory({ spinner: true })}
pagination={paginationFactory(options)}
// rowClasses={rowClasses}
// expandRow={expandRow}
/>
</>
)}
</ToolkitProvider>
搜索栏看起来像这样
我正在使用 FontAwesome-5 图标,并希望将fa-search 图标添加到 react-bootstrap-table2-toolkit SearchBar,如下所示
对此有任何建议
解决方案
通过将以下样式添加到 fa-search 图标来解决此问题
css
#{yourid} {
position: absolute;
width: 2.375rem;
/*height: 2.375rem;*/
line-height: 2.375rem;
text-align: center;
color: #7B7B7B;
}
js file
<i className='fas fa-search' id='filtersubmit' style={{fontSize:'15px'}}/>
<SearchBar {...props.searchProps} placeholder=''/>
推荐阅读
- java - 在 java 中使用自定义对象模型构造谓词
- flutter - 我们在flutter中导航到另一个页面后如何获取数据
- php - 如果我们按字母顺序传递月份,则按字母顺序排列的 PHP 日期在年份方案中不起作用
- python - Chrome 检查元素 -> 预览显示与单击 XHR 链接不同
- android - 活动重新创建后无法访问片段视图
- angular - Angular Service 中的布尔值未按预期工作
- c# - Asp Core 3 - 如何在控制器方法中允许可为空的 [FromBody] 对象
- java - Spring网关应用程序无法找到自定义过滤器
- c++ - 如何防止cpplint报告
错误的包括顺序? - javascript - 使用 react-google-maps 映射位置