Material ui react admin中自定义布局中的自定义组件，例如appbar、sidebar不'；don'；t为所有页面类型显示正确的主题颜色

您所期待的：

当您根据react admin资源中的URL/历史记录在自定义布局中动态拾取主题对象时，每个页面类型（例如列表、显示、创建和编辑）上都会使用正确的主题

发生了什么：

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

复制步骤：

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

在根代码级别

<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布局=({
儿童
仪表板
注销，
}) => {
const[resource，setResource]=useState（“”）；
const history=useHistory（）；
useffect（（）=>{
const newResource=history.location.pathname.replace（/^\/|\/$/g'）。toLowerCase（）；
如果（newResource==''）{
setResource（“主”）；
}else if（newResource！==资源）{
setResource（newResource）；
}
}，[history.location.pathname]）；
功能主题（主题）{
让结果=“”
var i=0；
对于（i=0；i({
...
}));
常量类=使用样式（主题）；
const dispatch=usedpatch（）；
const open=useSelector（state=>state.admin.ui.sidebarOpen）；
返回(
{儿童}
);
}; 导出默认布局

如果有必要，我可以发布列表、显示、创建和编辑组件，但我认为如果其中一个资源组件接收到了正确的主题变量，那么它们都应该

明确地说，我指的是列表、编辑、创建和显示组件之外的布局颜色，以及实际布局组件中的布局颜色，即appbar背景颜色错误，侧边栏等颜色错误。因此，当资源中的每个组件使用相同的布局组件时，列表颜色如何正确，而编辑、创建和显示页面颜色如何错误？我想我没办法控制这一切

环境

React管理版本：3.7.1 未显示问题的最新版本（如适用）：不适用 反应版本：17.0.2 浏览器：全部

---

堆栈跟踪（在JS错误的情况下）：不适用。别惹Regex的孩子，他们很危险。该问题与创建/编辑/显示与列表的URL结构不同有关，因此主题匹配不起作用

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