react-admin：<Show> 组件元素在包裹在 div 中时不会呈现

编程问答 2022-05-15

问题描述

我目前正在使用 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 中之前，它的外观如下：

enter image description here

注意名称的显示方式。

但是，当我用呈现的名称包装 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>

然后是我想要呈现的信息（在本例中是人名），然后它完全停止呈现并且不会显示在页面上。

enter image description here

我在上面提到的任何其他 react-admin 组件都没有发生这种情况。 我想知道为什么会这样，为什么它只发生在 Show 组件中。

提前致谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptjsxjsxjsxmaterial-uireact-adminreactjsreactjsreactjsreactjs