material-ui - react-admin 中自定义布局中的自定义组件，例如 appbar、侧边栏不显示所有页面类型的正确主题颜色

问题描述

你所期待的：

当您根据 react-admin 资源中的 URL/历史动态选择自定义布局中的主题对象时，将在每种页面类型上使用正确的主题，例如列表、显示、创建和编辑。

相反，发生了什么：

当您转到资源列表页面时，将使用正确的主题。但是，当您随后导航到任何创建/显示或编辑页面时，主题似乎默认回到基本/主要页面。

重现步骤：

创建自定义布局文件。也用自定义组件覆盖 Appbar 和 List 组件（使用 Listbase）。虽然我不确定 appbar/listbase 步骤是否必要。在 Admin 组件中使用自定义布局。创建一些资源。根据资源名称（使用历史）动态选择主题。导航到资源的列表页面。它们正确显示特定主题。导航到资源的创建/显示/编辑页面。由于某种原因，这些默认回到主要主题（或主要默认颜色）。相关代码：

在根级代码..

<Admin
      authProvider={AuthProvider({ awsConfig })}
      dashboard={Dashboard}
      dataProvider={graphQLProvider}
      history={history}
      layout={Layout}
      title="Home"
      loginPage={CustomLogin}
     // logoutButton={LogoutButton}
    >
 <LMSResource projection={["details"]} name="Assigment" options={{label: 'Assignments'}} create={AssignmentCreate} list={AssignmentList}
                   title="Generic" show={AssignmentShow} edit={AssignmentEdit} icon={AssignmentIcon}/>

在自定义布局文件中（我有一系列主题可供选择，这些主题是从另一个文件导入的）

const Layout = ({
    children,
    dashboard,
    logout,
}) => {
    const [resource, setResource] = useState('');
    const history = useHistory();
    useEffect(() => {
          const newResource = history.location.pathname.replace(/^\/|\/$/g, '').toLowerCase(); 
          if(newResource===''){
             setResource('primary');
          } else if (newResource !== resource) {
              setResource(newResource);
          }
    }, [history.location.pathname]);

    function getTheme(themes){
        let result = ''
        var i=0;

        for(i = 0; i < themes.length; i++){
            if(Object.keys(themes[i])[0] === resource){
                result = themes[i][resource];
            }
        }
        return (!result ? themes[0].primary : result );
    }

    const theme = createMuiTheme(getTheme(themes));
    const useStyles = makeStyles(() => ({
  ...
    }));

    const classes = useStyles(theme);
    const dispatch = useDispatch();
    const open = useSelector(state => state.admin.ui.sidebarOpen);

    return (
        <ThemeProvider theme={theme}>
            <CssBaseline /> 
            <Grid container>
                <Box className={classes.sidebar} color="grey.200" borderRight={1} item md={3} lg={2} component={Grid} display={{ xs: 'none', md: 'block' }}>
                    <Grid>
                         <Logo/>
                         <SchoolText  color='textPrimary'/>
                    </Grid>
                    <TextField className={[classes.search,classes['search' + resource]]} id="outlined-basic" label="Search" variant="outlined" />
                    <Sidebar open={open} className={classes.sidebar}>               
                        <Menu logout={logout} hasDashboard={!!dashboard} />
                    </Sidebar>

                </Box>
                <Box item component={Grid} xs={12} md={9} lg={10}>
                   <AppBar title={resource} logout={logout} />
                   <Box component={Grid} className={classes.breadcrumb} display={{ xs: 'none', md: 'block' }} borderTop={1}>
                       <Breadcrumbs/>
                   </Box>
                   <main>    
                    <div className={classes.content}>
                        {children}
                    </div>
                    </main>
                </Box>    
                <Notification />
            </Grid>
        </ThemeProvider>
    );
}; export default Layout

如有必要，我可以发布 List、Show、Create 和 Edit 组件，但我认为如果资源组件之一正在接收正确的主题变量，那么它们都应该吗？

需要明确的是，我的意思是列表、编辑、创建和显示组件之外的布局颜色以及实际布局组件中的布局颜色，即应用栏背景颜色错误，侧边栏等也是如此。那么它们如何适合列表但当资源中的每个页面使用相同的布局组件时，编辑、创建和显示页面是否错误？我觉得我没有办法控制这个？

环境

React-admin 版本：3.7.1 没有出现问题的最后一个版本（如果适用）：n/a React 版本：17.0.2 浏览器：所有堆栈跟踪（在 JS 错误的情况下）：n/a

标签： material-uireact-admin

material-ui - react-admin 中自定义布局中的自定义组件，例如 appbar、侧边栏不显示所有页面类型的正确主题颜色

问题描述

解决方案

推荐阅读