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

如何解决react-admin 中自定义布局中的自定义组件，例如应用栏、侧边栏没有为所有页面类型显示正确的主题颜色

您所期待的：

当您根据 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 组件，但我认为如果其中一个资源组件正在接收正确的主题变量，那么它们都应该？

要清楚，我的意思是列表、编辑、创建和显示组件之外的布局颜色以及实际布局组件中的布局颜色，即应用栏背景是错误的颜色，侧边栏等也是如此。那么它们怎么可能是正确的当它为资源中的每个页面使用相同的布局组件时，对于 List 但对于 Edit、Create 和 Show 页面是错误的？我想我没有办法控制这个吗？

环境

react-admin 版本：3.7.1 未出现问题的最新版本（如果适用）：不适用反应版本：17.0.2 浏览器：全部堆栈跟踪（在 JS 错误的情况下）：不适用

解决方法

呸。不要惹Regexs孩子，他们很危险。该问题与创建/编辑/显示与列表的不同 URL 结构有关，因此主题匹配不起作用..