typescript - 在 React Material-UI 中实现全局主题

问题描述

我对 React Material-UI 主题有点困惑。

我已尝试将其设置为尽可能基本，但似乎我无法以某种方式使其工作。

下面是你可以找到我的代码：

开始.tsx

const theme = createMuiTheme({
    palette: {
        type: 'dark',
        primary: blue,
        secondary: lightGreen
    }
})

ReactDOM.render(
    <ThemeProvider theme={theme}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </ThemeProvider>
    ,
    document.getElementById("root")
)

UserInterfaces.scan();

应用程序.tsx

export class App extends React.Component<IProps, IState> {

    constructor(props) {
        super(props);
        this.state = {
            menu: null
        }
    }

    render() {
        if (!this.state.menu) {
            this.login();
            return <div>Loading ... </div>
        } else {
            return <div className="hx-top-frame">
                <div>
                    <MenuBar menuList={this.state.menu} />
                </div>
                <div>
                    Content here
                {/* <Content /> */}
                </div>
            </div>
        }
    }
}

菜单栏.tsx

export class MenuBar extends React.Component<IMenuProps, IMenuStates> {

    constructor(props) {
        super(props);
        this.state = { expanded: "" };
    }

    private setClose() {
        this.setState({ expanded: "" });
    }

    public render() {
        let menulist: IMenuArray[] = this.props.menuList.map<IMenuArray>(item => {
            return {
                path: item.path,
                icon: item.icon,
                link: Util.hyphenate(item.path)
            }
        })
        return <nav className="hx-menu">
            <Hidden smUp>
                <Drawer variant="temporary" anchor='left' open={this.state.expanded != ""} onClose={this.setClose.bind(this)} className="left-drawer">
                    <SubMenu menu={menulist} />
                </Drawer>
            </Hidden>
            <Hidden xsDown>
                <Drawer variant="permanent" anchor='left' open={this.state.expanded != ""} onClose={this.setClose.bind(this)} className="left-drawer">
                    <SubMenu menu={menulist}></SubMenu>
                </Drawer>
            </Hidden>
        </nav >
    }
}

子菜单.tsx

class SubMenu extends React.Component<ISubMenuProps, IMenuStates> {

    constructor(props) {
        super(props);
        this.state = { expanded: "" };
    }

    public render() {
        let submenu: IMenuItems = {};
        let menuitems: IMenuArray[] = [];
        this.props.menu.forEach(menu => {
            let items = menu.path.split("/");
            let parent = items.length > 1;
            let name = items.shift();
            let child = items.join("/");
            if (!parent) {
                menuitems.push({ path: name, icon: menu.icon, link: menu.link });
            } else {
                if (!submenu[name]) submenu[name] = [];
                submenu[name].push({ path: child, icon: menu.icon, link: menu.link });
            }
        })

        return <List>
            {Object.keys(submenu).map(name => {
                let menu = name.split("/").shift();
                return <ListItem button className="hx-submenu" key={"m-" + name}>
                    <span className="hx-nowrap" onClick={() => { this.setState({ expanded: this.state.expanded == name ? "" : name }) }}>
                        <ListItemText primary={name} key={"t-" + name} />{this.state.expanded == name ? <ExpandLess /> : <ExpandMore />}
                    </span>
                    <Collapse in={this.state.expanded == name} timeout="auto" unmountOnExit className="hx-submenu">
                        <SubMenu menu={submenu[name]} />
                    </Collapse>
                </ListItem>
            })}

            {menuitems.map(item => {
                return <ListItem button component={RouterLink} to={item.link} key={"i-" + item.path}>
                    <ListItemText primary={item.path} className="hx-menu" key={"l-" + item.path} />
                </ListItem>
            })}

        </List>
    }
}

以下是结果。

这是菜单完全最小化的时候。

这就是一切都扩大的时候。

现在，我的问题是：

为什么右侧面板是浅灰色的？如何将菜单面板更改为蓝色？
只要窗户有足够的宽度，我就需要打开抽屉。我可以做隐藏的部分，但是为什么它会出现在我的内容部分的顶部？如何让它在左边持久化？
为什么菜单会横向展开？如何让它垂直扩展？
我不想为每个组件制作布局，因此我不想要风格化的组件。只是我将在整个项目中使用的一个全球主题。怎么做？我遵循了文档示例，但它仍然像上面的示例一样。顺便说一句，我并不完全理解文档，因为它倾向于使用函数，而我所有的项目都基于类。

代码沙箱：https ://codesandbox.io/embed/theme-test-gwutc

谢谢你。

标签： typescriptmaterial-uireact-dom

我会回答 1 和 4，至于现在我不知道 2,3 的答案。

面板是浅灰色的，因为它是 Paper 的默认颜色（抽屉在引擎盖下使用 Paper）。
纸张不受调色板影响。primary
为了全局更改纸张背景颜色，您可以这样做：

const theme = createMuiTheme({
  palette: {
    type: "dark",
    primary: blue,
    secondary: lightGreen,
    background: {
      paper: "blue" // drawers (and papers) will be blue because of this line.
    }
  }
});

您可以非常轻松地将全局主题应用于所有 Material-ui 组件。您已经通过使用 ThemeProvider 包装您的应用程序来做到这一点，您所要做的就是正确地编辑您的主题。
例如：如果你想覆盖抽屉的默认背景颜色，你也可以这样做（比上面的选项1更好，因为它不适用于纸质组件）：
```
const theme = createMuiTheme({
  overrides: { // you declare you override default material-ui styles
   MuiDrawer: {
     paper: {
       backgroundColor: 'blue',
     }
   }
  }
});
```

typescript - 在 React Material-UI 中实现全局主题

问题描述

解决方案

推荐阅读