Question

我试图遵循https://marmelab.com/react-admin/Theming.html#writing-a-custom-theme来设置Datagrid标头的样式（以使用粗体字体样式），如下所示：

def has_duplicates(iterable):
    seen = []
    for x in iterable:
        if x in seen:
            return True
        seen.append(x)
    return False

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

该代码有什么问题？有什么想法改变所有Datagrid实例的标题的样式吗？

谢谢

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 Datagrid的标题：

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

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

Answer 3

重新设置应用程序中数据网格的所有实例的样式，例如将所有标头设置为粗体（我个人认为无论如何都会提供更好的默认值！）：

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

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

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

3 个答案: