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

Question

I am using react-admin and would like to know that if I can change the background color of the menu. I couldn't see any option under material-ui theme palette for that area.

Answer 1

You'll have to implement your own menu for that:

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

Example:

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

The current react-admin v3 recommends to use overrides of the default material-ui theme:

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

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

And to use it in your admin component you use it:

 <Admin theme={customTheme}>

Answer 3

The current Menu component is deprecated.

Therefore, it must be changed differently.

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