如何为MUI-Datatables创建带轮廓样式的自定义搜索框

当前依赖版本：

• @mui/material: ^5.11.4
• mui-datatables: ^4.3.0

默认的搜索框是无外边框的基础输入样式，想要改成带圆角外轮廓的TextField样式，直接用mui-datatables的自定义搜索框配置就能实现：

代码示例 #

import React from 'react';
import MUIDataTable from "mui-datatables";
import TextField from '@mui/material/TextField';

const columns = ["姓名", "公司", "城市", "州"];
const data = [
 ["Joe James", "测试公司", "扬克斯", "纽约州"],
 ["John Walsh", "测试公司", "哈特福德", "康涅狄格州"],
];

const options = {
  customSearchRender: ({ searchText, handleSearch }) => (
    <TextField
      variant="outlined"
      placeholder="搜索..."
      value={searchText}
      onChange={(e) => handleSearch(e.target.value)}
      size="small"
      sx={{ mr: 1 }}
    />
  )
};

export default function EmployeeTable() {
  return (
    <MUIDataTable
      title={"员工列表"}
      data={data}
      columns={columns}
      options={options}
    />
  );
}

细节自定义 #

如果要调整轮廓的圆角、边框颜色，给TextField添加InputProps即可：

TextField
  variant="outlined"
  // ...其他属性
  InputProps={{
    sx: {
      borderRadius: 2, // 放大圆角
      '& .MuiOutlinedInput-notchedOutline': {
        borderColor: '#e0e0e0', // 默认边框色
      },
      '&:hover .MuiOutlinedInput-notchedOutline': {
        borderColor: '#90caf9', // 鼠标悬浮时的边框色
      },
    }
  }}

内容的提问来源于stack exchange，提问作者Nay