如何在 react-admin 中根据资源更改原色？

Question

我有各种资源组件位于 react-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 属性还是有更好的方法？

Answer 1

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} />
}