在 React-Admin 上更改菜单背景颜色

Question

我正在使用 react-admin，想知道是否可以更改菜单的背景颜色。我在该区域的 material-ui 主题调色板下看不到任何选项。

Answer 1

您必须为此实现自己的菜单：

文档：https://marmelab.com/react-admin/Theming.html#using-a-custom-menu

示例：

// in MyMenu.js
import { Menu } from 'react-admin';
import { withStyles } from '@material-ui/core/styles';

const styles {
    menu: {
        backgroundColor: 'red',
    },
};

const MyMenu = ({ classes, ...props }) => (
    <Menu className={classes.menu} {...props} />
);

export default withStyles(styles)(Menu);

// in MyLayout.js
import { Layout } from 'react-admin';
import Menu from './Menu';

const MyLayout = (props) => <Layout {...props} menu={MyMenu} />;

export default MyLayout;

Answer 2

当前的 react-admin v3 建议使用默认 material-ui 主题的覆盖：

import { defaultTheme } from "react-admin";
import { createMuiTheme } from '@material-ui/core/styles';

const customTheme = createMuiTheme({
  ...defaultTheme,
  ...{
    palette: {
      primary: {
        main: "#7edcff",
      },
      secondary: {
        main: "#0089c1",
      },
    }
  }
});

要在您的管理组件中使用它，您可以使用它：

 <Admin theme={customTheme}>

Answer 3

当前的 Menu 组件已弃用。

因此，必须进行不同的更改。

Example

import React from "react";
import { MenuProps, MenuItemLink } from "react-admin";

const SideMenu: React.ComponentType<MenuProps> = ({ dense = false }) => {
    return (
        <div
            className={css`
                margin-top: "1vw";
            `}
        >
            <br />
            <MenuItemLink
                className={css`
                    color: ${Colors.WHITE}; // primaryText Color
                `}
                to="/"
                primaryText={"dashbord"}
                leftIcon={<Image width={ICON_WIDTH} src={"/img/dashboard-w.svg"} preview={false} />}
                exact
                dense={dense}
            />
            <br />
            <MenuItemLink
                className={css`
                    color: ${Colors.WHITE};
                `}
                to="/users"
                primaryText={"user list"}
                leftIcon={<Image width={ICON_WIDTH} src={"/img/user-group-w.svg"} preview={false} />}
                exact
                dense={dense}
            />
        </div>
    );
};

...

  <Layout
            {...props}
            menu={SideMenu}
        />

在 React-Admin 上更改菜单背景颜色

Change Menu background color on React-Admin

background

background-color

reactjs

material-ui

react-admin