Question

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

Answer 1

当前的 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 2

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

文档：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 3

不推荐使用当前的菜单组件。

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Tic Tak Toe</title> <link rel="stylesheet" href="index.css" /> <script src="index.js"></script> </head> <body> <table> <tr> <td> <div class="box-el"> <img src="black.png" id="1" height="150px" width="150px" alt="Symbols" onmousedown="Function(this)" /> </div> </td> <td> <div class="box-el"> <img src="black.png" id="2" height="150px" width="150px" alt="Symbols" onmousedown="Function(this)" /> </div> </td> <td> <div class="box-el"> <img src="black.png" id="3" height="150px" width="150px" alt="Symbols" onmousedown="Function(this)" /> </div> </td> </tr> <tr> <td> <div class="box-el"> <img src="black.png" id="4" height="150px" width="150px" alt="Symbols" onmousedown="Function(this)" /> </div> </td> <td> <div class="box-el"> <img src="black.png" id="5" height="150px" width="150px" alt="Symbols" onmousedown="Function(this)" /> </div> </td> <td> <div class="box-el"> <img src="black.png" id="6" height="150px" width="150px" alt="Symbols" onmousedown="Function(this)" /> </div> </td> </tr> <tr> <td> <div class="box-el"> <img src="black.png" id="7" height="150px" width="150px" alt="Symbols" onmousedown="Function(this)" /> </div> </td> <td> <div class="box-el"> <img src="black.png" id="8" height="150px" width="150px" alt="Symbols" onmousedown="Function(this)" /> </div> </td> <td> <div class="box-el"> <img src="black.png" id="9" height="150px" width="150px" alt="Symbols" onmousedown="Function(this)" /> </div> </td> </tr> </table> <div id="info-el"> <p>Select Symbols</p> </div> </body> </html>

Example

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

3 个答案: