如何设置 react-admin Datagrid 的 header 的样式？

Question

我尝试按照https://marmelab.com/react-admin/Theming.html#writing-a-custom-theme来设置 Datagrid 的 header 的样式（使用粗体字体样式），如下所示：

const myTheme = createMuiTheme({
  overrides: {
    Datagrid: {
      header: {
        fontWeight: 'bold',
      }
    }
  }
})

const App = () => (
  <Admin theme={myTheme}>
    // ...
  </Admin>
);

但是，上面的代码不起作用。

该代码有什么问题？ 有什么想法可以改变所有 Datagrid 实例的 styles header 吗？

谢谢，

Answer 1

最后，我设法将 react-admin Datagrid 的标题设置为如下所示：

const myTheme = createMuiTheme({
  overrides:{
    MuiTableRow: {
      head: {
        backgroundColor: 'lightgray',
        "& > th ": {
          color: 'black',
          fontWeight: 'bold',
        }
      },
    }
  }
})

const App = () => (
  <Admin theme={myTheme}>
    // ...
  </Admin>
);

Answer 2

尝试这个：

const myTheme = createMuiTheme({
  datagrid: {
    header: {
      fontWeight: 'bold',
    },
  },
})

const listStyles = theme => ({
  headerCell: theme.datagrid.header,
})

const CardList = withStyles(listStyles)(({ classes, ...props }) => (
  <List {...props} >
    <Datagrid classes={classes} >
      <TextField source="id" />
      ...
    </Datagrid>
   </List>
))

文档： https : //marmelab.com/react-admin/List.html#the-datagrid-component部分：“CSS API”

Answer 3

要在您的应用程序中重新设计数据网格的所有实例，例如将所有标题设置为粗体（我个人认为无论如何都会成为更好的默认值！）：

const theme = createMuiTheme({
  overrides: {
    RaDatagrid: {
      headerCell: {
        fontWeight: 'bold',
      },
    }
  },
});

<Admin theme={theme} ...>
</Admin>

Answer 4

我想自定义ra-datagrid的header。
这是它之前的样子：

以下是它如何根据需要进行处理：

为此，我添加了以下 styles：

    const useStyles = makeStyles({
      headerCell: {
        backgroundColor: '#def2ff',
        color: 'white',
        fontWeight: 'bold',
      },
      row: {
        '&:nth-of-type(odd)': {
          backgroundColor: '#def2ff',
        },
        '&:last-child td, &:last-child th': {
          border: 0,
        },
      },
    });

const MyDataGridComponent = (props) => {
  const classes = useStyles();
  return (
    <List
      {...props}
    >
      <Datagrid
        rowClick="show"
        classes={{ headerCell: classes.headerCell, row: classes.row }}
      >
        <TextField source="id" label={'Kit ID'} />
        <TextField source="mpi" label={'MPI ID'} />
        <TextField source="jobNo" />
        <DateField source="receivedDate" />
        <DateField source="shippingDate" />
        <TextField source="kitName" />
      </Datagrid>
    </List>
  );
};

export default MyDataGridComponent;