I'm feeling a bit lost when it comes to setting up React Material-UI theme.
Even though I've tried to keep it simple, it's not working out for me as expected.
Here is the code snippet I have:
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>
}
}
And now, my queries are:
- Why is the right panel light grey? How can I change it to blue?
- I want the drawer to stay open when there is enough window width. However, how do I prevent it from overlapping with the content part? And make it fixed on the left?
- How can I ensure the menu expands vertically instead of horizontally?
- I don't want to style each component individually. Is it possible to use a global theme throughout the project without customizing components? Even after following the documentation, it doesn't work as expected since my projects are based on classes rather than functions.
Code sandbox link: https://codesandbox.io/embed/theme-test-gwutc
Thank you.