时间戳

首页 > 解决方案 > 有什么快速的方法来实现 Material-UI 主题吗？

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

问题描述

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

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

标签： material-uireact-admin

解决方案

当然是。您可以将自定义传递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）。

推荐阅读