英文:
React MUI Datagrid Top Center Alignment for Headers
问题
我想通过sx来设置包裹的表头的对齐方式为顶部居中：
const datagridSx = {
'& .MuiDataGrid-columnHeaders': {
height: 'unset !important',
maxHeight: '168px !important',
},
"& .MuiDataGrid-columnHeaderTitle": {
whiteSpace: "normal",
lineHeight: "normal",
fontWeight: "bold",
verticalAlign: "top"
},
};
但它不起作用。有人可以帮助我吗？谢谢。
英文:
I would like to set the alignment of the wrapped headers as top-center via sx:
const datagridSx = {
'& .MuiDataGrid-columnHeaders': {
height: 'unset !important',
maxHeight: '168px !important',
},
"& .MuiDataGrid-columnHeaderTitle": {
whiteSpace: "normal",
lineHeight: "normal",
fontWeight: "bold",
verticalAlign: "top"
},
};
but it doesn't work. Could anyone help me, please? Thank you.
答案1
得分: 1
代替在.MuiDataGrid-columnHeaderTitle上使用verticalAlign: "top"，您可以在.MuiDataGrid-columnHeaderTitleContainer上更改alignItems属性。
因此，您的sx看起来可能像这样：
const datagridSx = {
".MuiDataGrid-columnHeaderTitleContainer": {
alignItems: "start",
},
"& .MuiDataGrid-columnHeaders": {
height: "unset !important",
maxHeight: "168px !important",
},
"& .MuiDataGrid-columnHeaderTitle": {
whiteSpace: "normal",
lineHeight: "normal",
fontWeight: "bold",
},
};
英文:
Instead of using the verticalAlign: "top" on the .MuiDataGrid-columnHeaderTitle you can change the alignItems property on the .MuiDataGrid-columnHeaderTitleContainer.
So your sx would look something like this:
const datagridSx = {
".MuiDataGrid-columnHeaderTitleContainer": {
alignItems: "start",
},
"& .MuiDataGrid-columnHeaders": {
height: "unset !important",
maxHeight: "168px !important",
},
"& .MuiDataGrid-columnHeaderTitle": {
whiteSpace: "normal",
lineHeight: "normal",
fontWeight: "bold",
},
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论