React-admin框架如何实现Datagrid组件完全自定义样式？

完全可以在保留 Datagrid 所有功能特性的前提下实现 100% 自主样式定制，你当前仅覆盖了少部分内置类对应的样式，可通过以下几种方式实现全量定制：

• 覆盖全量内置语义化类名
  React-admin 的 Datagrid 所有 DOM 节点都有固定的公开类名，包括 RaDatagrid-root、RaDatagrid-header、RaDatagrid-headerCell、RaDatagrid-body、RaDatagrid-row、RaDatagrid-rowHover、RaDatagrid-rowSelected、RaDatagrid-cell 等，你可以在 useStyles 中补充所有这些类的样式规则，即可覆盖所有默认样式，完全不会影响组件原有排序、选择、展开、编辑等功能。
• 传入自定义插槽组件
  Datagrid 支持通过 props 传入自定义的 DOM 组件替代默认节点，常用的插槽属性包括：
  • rowComponent：自定义行容器组件
  • headerCellComponent：自定义表头单元格组件
  • cellComponent：自定义内容单元格组件
    你只需要在自定义组件中将接收的所有 props 透传，即可保留所有原有功能，样式可以完全自主定义，示例代码如下：

import { forwardRef } from 'react';
import { Datagrid, TextField } from 'react-admin';
import { makeStyles } from '@material-ui/core/styles';

// 自定义行组件，透传所有props和ref保证功能正常
const CustomDatagridRow = forwardRef((props, ref) => {
  return (
    <tr 
      ref={ref} 
      {...props} 
      style={{
        // 完全自定义行样式
        height: '48px',
        border: '1px solid #eee',
        borderRadius: '8px',
        marginBottom: '8px',
        cursor: 'pointer'
      }} 
    />
  )
})

const useStyles = makeStyles({
  // 补充更多自定义样式
  headerCell: {
    fontWeight: 600,
    fontSize: '14px',
    color: '#333',
    padding: '12px 16px'
  },
  cell: {
    padding: '12px 16px',
    fontSize: '14px'
  }
})

const YourList = () => {
  const classes = useStyles();
  return (
    <Datagrid
      rowComponent={CustomDatagridRow}
      classes={classes}
      // 原有Datagrid的所有配置，比如sortable、selectable等都保留
      sortable={true}
      selectable={true}
    >
      {/* 原有字段配置完全不变 */}
      <TextField source="id" />
      <TextField source="name" />
    </Datagrid>
  )
}

• 提升CSS优先级避免样式被覆盖
  如果出现自定义样式不生效的情况，可给 Datagrid 外层容器添加自定义类名，通过后代选择器提升优先级，即可保证自定义样式覆盖默认样式。

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