如何解决react-admin:<Show> 组件元素在包裹在 div 中时不会呈现
我目前正在使用 react-admin 开发管理门户,并且我已经能够使用 MaterialUI 无缝地设置它的样式,特别是它的 makeStyles 钩子。我这样做的方法是导入与此类似的 makeStyles 文件:
export const detailsView = makeStyles({
detail: {
width: "100%","& div": {
display: "Block",visibility: "Visible",}
}
export default detailsView
进入我的主要组件,例如,一个像这样的 List 组件:
export const ExampleList = (props) => {
const classes = importedStyles();
return (
<>
<h2 className={classes.tableTitle}>Example Header</h2>
<List {...props} className={classNames(classes.table)}>
<Datagrid rowClick="edit">
<ReferenceField source="id" reference="users" label="Name">
<FunctionField
label="Name"
render={(record) => `${record.first_name} ${record.last_name}`}
/>
</ReferenceField>
<TextField source="title"/>
<DateField source="date" />
</Datagrid>
</List>
</>
);
};
export default ExampleList;
如果我必须包装自己的 div
,它也包含 TextField
的一部分,一切仍然按计划进行。但是,这仅适用于 List
、Edit
、Filter
和 Create
,但是,我无法正确设置样式Show
组件。
在添加任何样式或将某些字段包含在 div
中之前,它的外观如下: 注意名称的显示方式。
但是,当我用呈现的名称包装 Person Details
标头时,如下所示:
<div className={detailClasses.detailSection}>
<h3 className={ detailClasses.detailSectionTitle}>Person Details</h3>
<ReferenceField
source="id"
reference="users"
label="Name"
className={detailClasses.detailSectionInfo}
>
<FunctionField
render={(record) => `${record.first_name} ${record.last_name}`}
/>
</ReferenceField>
</div>
然后是我想要呈现的信息(在本例中是人名),然后它完全停止呈现并且不会显示在页面上。
我在上面提到的任何其他 react-admin 组件都没有发生这种情况。
我想知道为什么会这样,为什么它只发生在 Show
组件中。
提前致谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。