更改React Admin上的菜单背景颜色

Question

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

Answer 1

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

文件：https://marmelab.com/react-admin/Theming.html#using-a定制菜单

示例：

// 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建议使用默认材料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}
/>