有什么快速的方法来实现 Material-UI 主题吗？答案

【问题标题】：Is there any quick way to implement a Material-UI theme?有什么快速的方法来实现 Material-UI 主题吗？
【发布时间】：2021-11-19 18:52:45
【问题描述】：

我知道 react-admin 中的自定义主题过程。

我想知道在 react-admin 中是否可以实现自定义主题，而无需逐个组件地进行主题化。例如 Material Ui 高级主题 (see here)

【问题讨论】：

标签： material-ui react-admin

【解决方案1】：

是的，当然。您可以将自定义的theme 传递给<Admin> 组件：

const App = () => (
    <Admin theme={myTheme} dataProvider={simpleRestProvider('http://path.to.my.api')}>
        // ...
    </Admin>
);

这是一个自定义theme的示例：

import { defaultTheme } from 'react-admin';
import merge from 'lodash/merge';
import indigo from '@material-ui/core/colors/indigo';
import pink from '@material-ui/core/colors/pink';
import red from '@material-ui/core/colors/red';

const myTheme = merge({}, defaultTheme, {
    palette: {
        primary: indigo,
        secondary: pink,
        error: red,
        contrastThreshold: 3,
        tonalOffset: 0.2,
    },
    typography: {
        // Use the system font instead of the default Roboto font.
        fontFamily: ['-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Arial', 'sans-serif'].join(','),
    },
    overrides: {
        MuiButton: { // override the styles of all instances of this component
            root: { // Name of the rule
                color: 'white', // Some CSS
            },
        },
    },
});

您可以在https://marmelab.com/react-admin/Theming.html#writing-a-custom-theme 找到更多信息，并在电子商务演示 (https://github.com/marmelab/react-admin/blob/master/examples/demo/src/layout/themes.ts) 中找到自定义管理主题的完整示例。

【讨论】：