[英]How to style the header of react-admin Datagrid?
I tried to follow https://marmelab.com/react-admin/Theming.html#writing-a-custom-theme to style the header of Datagrid (to use bold font style) as below:我尝试按照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>
);
However, the code above does not work.但是,上面的代码不起作用。
What's wrong with that code?该代码有什么问题? And any ideas change styles the header of all of Datagrid instances?
有什么想法可以改变所有 Datagrid 实例的 styles header 吗?
Thanks,谢谢,
Finally I managed to style the header of react-admin Datagrid as below:最后,我设法将 react-admin Datagrid 的标题设置为如下所示:
const myTheme = createMuiTheme({
overrides:{
MuiTableRow: {
head: {
backgroundColor: 'lightgray',
"& > th ": {
color: 'black',
fontWeight: 'bold',
}
},
}
}
})
const App = () => (
<Admin theme={myTheme}>
// ...
</Admin>
);
Try this:尝试这个:
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>
))
Documentation: https://marmelab.com/react-admin/List.html#the-datagrid-component section: "CSS API"文档: https : //marmelab.com/react-admin/List.html#the-datagrid-component部分:“CSS API”
To restyle ALL instances of a Data Grid in your application, eg set all headers to bold (which I personally think would make a better default anyway!):要在您的应用程序中重新设计数据网格的所有实例,例如将所有标题设置为粗体(我个人认为无论如何都会成为更好的默认值!):
const theme = createMuiTheme({
overrides: {
RaDatagrid: {
headerCell: {
fontWeight: 'bold',
},
}
},
});
<Admin theme={theme} ...>
</Admin>
I wanted to customise the header of the ra-datagrid.我想自定义ra-datagrid的header。
Here is how it looked before:这是它之前的样子:
Here is how it looked after as required:以下是它如何根据需要进行处理:
To do the above I added following styles:为此,我添加了以下 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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.