您如何在 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}/>

我应该使用 'every react-admin component' 上可用的 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} />
}

您如何在 react-admin 中基于资源更改原色？

How do you change the primary colour on a resource basis in react-admin?

material-ui

react-admin