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

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 实例的 header 样式吗？

谢谢，

Answer 1

试试这个：

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 2

最后我设法将 react-admin 数据网格的 header 设置为如下样式：

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

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

Answer 3

重新设置应用程序中数据网格的所有实例的样式，例如将所有 headers 设置为粗体（我个人认为这会是一个更好的默认值！）：

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

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

Answer 4

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

这是按要求进行的处理：

为了完成上述操作，我添加了以下样式：

    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;

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

How to style the header of react-admin Datagrid?

reactjs

react-admin