reactjs - 覆盖嵌套在 theme.breakpoints.up ("md"中的 Mui 主题

Question

代码

MuiTab: {
    root: {
        height: 140,
        [theme.breakpoints.up("md")]: {
             minWidth: 72,
        }
    }
}

错误

[ts] Cannot find name 'theme'.

问题

我不知道在哪里声明“主题”。

Answer 1

您发布的代码片段可能来自通过调用 createMuiTheme() 创建自定义主题的方法。技巧是将 createMuiTheme() 的结果分配给局部变量，然后设置覆盖。然后你可以使用断点:

import { createMuiTheme } from 'material-ui/styles';
import { orange } from 'material-ui/colors';

export function getCustomTheme() {
    let theme: any = createMuiTheme({
        palette: {
            primary: orange,
        },
        overrides: {}
    });

    theme.overrides.MuiTab = {
        root: {
            height: 140,
            [theme.breakpoints.up('md')]: {
                minWidth: 72,
                backgroundColor: 'red'
            }
        }
    };

    return theme;
}