如何实现MUI X Data Grid根据登录管理员姓名动态高亮对应行？

核心思路 #

放弃为每个管理员生成独立类名的硬编码方式，改为判断行内Admin值与当前登录管理员是否匹配，匹配时赋予统一的高亮类名，再通过通用类名设置样式，实现对所有登录管理员的适配。

具体实现步骤 #

1. 获取当前登录管理员姓名
   从sessionStorage中取出存储的管理员姓名：

   const currentAdmin = sessionStorage.getItem("username");
   

2. 动态生成行类名
   修改getRowClassName逻辑，仅在当前行Admin与登录管理员匹配时添加高亮类：

   getRowClassName={(params) => {
     // 可选：增加trim处理避免空格差异
     const rowAdmin = params.row.admin?.trim();
     const currentUser = currentAdmin?.trim();
     return rowAdmin === currentUser ? 'highlight-admin-row' : '';
   }}
   

3. 设置通用高亮样式
   在sx属性中直接针对统一的高亮类写样式，无需硬编码特定管理员姓名：

   sx={{
     '& .highlight-admin-row': {
       backgroundColor: 'yellow',
     },
   }}
   

额外适配处理 #

如果存在姓名大小写不一致的场景，可以在判断时统一转为相同大小写：

return rowAdmin?.toLowerCase() === currentUser?.toLowerCase() ? 'highlight-admin-row' : '';

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