Я немного смущен темой React Material-UI.
Я попытался настроить его как можно проще, но, похоже, мне не удалось заставить его работать как-то.
Ниже вы можете найти мой код:
start.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();
app.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>
}
}
}
menubar.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 >
}
}
submenu.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
Спасибо.
