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