您如何在 react-admin 中根据资源更改主颜色？

如何解决您如何在 react-admin 中根据资源更改主颜色？

我有各种资源组件位于 react-admin Admin 组件中。管理组件具有自定义布局。但是，每个资源屏幕都有不同的主色，以表示您所在的部分和内容类型。如何将原色的特定主题对象变量传递给每个资源，然后在我的自定义布局中使用？

  <Admin
authProvider={AuthProvider}
dashboard={Dashboard}
dataProvider={graphQLProvider}
history={history}
layout={Layout}
title="Home"

  <Resource name="User" options={{label: 'Administrators'}} list={UserList} show={UserShow} edit={UserEdit}
            create={UserCreate} icon={UserIcon}/>

我应该使用“每个 react-admin 组件”上都可用的 className 道具还是有更好的方法？

解决方法

React-admin 不支持此功能，但您可以使用自定义布局（请参阅 Replacing the appbar）和历史记录位置上的侦听器来实现它，以从 URL 获取资源。类似的东西：

import React,{ useEffect,useState } from 'react';
import { useHistory } from 'react-router-dom';
import { AppBar } from 'react-admin';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
   posts: {
       backgroundColor: 'red',},comments: {
       backgroundColor: 'blue',}
});

const MyAppBar = ({ children }) => {
   const [resource,setResource] = useState();
   const history = useHistory();
   const classes = useStyles();
   useEffect(() => {
      const newResource = extractResourceFromPathname(history.location.pathname); // left as an exercise to the reader
      if (newResource !== resource) {
          setResource(newResource);
      }
   },[history.location.pathname]);

   return <AppBar className={classes[resource]} {...props} />
}