如何在react-admin中更改仪表板图标？

Question

通过提供道具，很容易更改资源的图标。如何在不定义整个自定义导航的情况下更改仪表板图标？

Answer 1

好吧，有趣的问题。

为了确保您可以重现此内容，让我们完成以下步骤：

• 在您的<Admin/>内，您通过了此道具；

<Admin {...props} layout={CustomLayout} /> // "CustomLayout" is your custom layout component

• 在您的CustomLayout内，您通过了此道具；

import { Layout } from 'react-admin';

<Layout {...props} menu={CustomMenu} /> // "CustomMenuLayout" is your custom menu component

• 在您的CustomMenu中，定义要渲染的根路径的菜单链接first;

import { MenuItemLink } from 'react-admin';
import DashboardIcon from '@material-ui/icons/Dashboard'; // import any icon as usual

export const CustomMenu = props => {
  return (
    <div>
      <MenuItemLink
         onClick={onClick}
         to="/"
         primaryText="Dashboard"
         leftIcon={<DashboardIcon />} // pass the icon here
         exact
         {...props}
       />
       {/* other menu links follow... */}
    </div>
  );
};

确定“只是更改仪表板图标”看起来需要很多工作，但是有两个优点：

1. 您开始对应用程序的显示方式有了更多控制，因此有了更多的自定义功能。

2. 您从下面开始了解react-admin，因此可以更快地调试问题。