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

【问题标题】：How to change dashboard icon in react-admin?如何在 react-admin 中更改仪表板图标？
【发布时间】：2020-06-06 08:57:39
【问题描述】：

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

【问题讨论】：

标签： react-admin

【解决方案1】：

好的，有趣的问题。

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

在你的<Admin/> 中，你传递了这个道具；

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

在你的CustomLayout 中，你传递了这个道具；

import { Layout } from 'react-admin';

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

在您的CustomMenu 中，定义要呈现的根路径的菜单链接first；

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

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

“仅更改仪表板图标”确实看起来需要做很多工作，但您有两个优点：

您开始更好地控制应用的显示方式，从而实现更多自定义。
您从底层开始了解react-admin，从而更快地调试问题。

【讨论】：

【解决方案2】：

密钥是<DashboardMenuItem leftIcon={...} />

详情如下：

使用自定义布局

<Admin layout={MyLayout} ... />

在 MyLayout 中，使用自定义菜单

import { Layout } from 'react-admin';
import MyMenu from './MyMenu'

const MyLayout = props => <Layout
    {...props}
    menu={MyMenu}
/>
export default MyLayout

最后一件事，MyMenu 的内容

import {
    DashboardMenuItem,
    MenuItemLink,
    getResources,
} from 'react-admin'
import { useSelector } from 'react-redux'
import {
    Storefront,
    ViewList,
} from '@material-ui/icons';

const MyMenu = () => {
    const resources = useSelector(getResources)
    return (
    <div>
        <DashboardMenuItem leftIcon={<Storefront />} />
        {resources.map(resource => (
            <MenuItemLink
            key={resource.name}
            to={`/${resource.name}`}
            primaryText={
                (resource.options && resource.options.label) ||
                resource.name
            }
            leftIcon={
                resource.icon ? <resource.icon /> : <ViewList />
            }
            />
        ))}
    </div>
    )
}

export default MyMenu

【讨论】：