I am trying to use #material-ui/core library in my application and want to create a nested menu. I can see that material specification talks about a nested menu but material-ui does not have a built in support for the same. I tried using Menu and MenuItems. Also went through the documentation, but did not find the way to create such nested menu. Basically ManuItem is not allowing me to add children inside it. Can someone help me for the same?
sandbox: https://codesandbox.io/s/material-ui-nested-menu-problem-ibxoh
This functionality is not supported by material-ui officially yet. However, there is a package about it called material-ui-nested-menu-item, you can check how it works here:
https://codesandbox.io/s/material-ui-nested-menu-item-example-b25j6
Here is a package for MUI version 5.
Material UI Nested Menu Item v5 on NPM
Material UI Nested Menu Item v5 Demo
Related
Material UIs (MUI's) documentation is perfectly broken here: At
https://mui.com/system/getting-started/overview/#all-inclusive
the last line reads:
"See ->Advanced for details on how to use MUI System with non-MUI components."
Yet the link to Advanced is dead as of today (404). Is there a way to use the style system outside of MUIs components?
I think that's the Custom Components page, it was fixed here but not live yet I guess
I am trying to make such kind of setup using material UI but am unable to do it properly using material UI.
I am not able to add the product add and remove setup below which should be below product name and price as shown in image.
If it is vital to use material-ui for positioning your elements and it expected to be responsive for different screen resolutions you could use https://material-ui.com/components/grid/
Otherwise, you can just use flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
There is a link to codesandbox for expamle made via MU Grids https://codesandbox.io/embed/material-demo-dvhfy?fontsize=14&hidenavigation=1&theme=dark
I have found this answer
How to use rtl layout of material-ui next in react app
And also Material UI docs for this issue
https://material-ui.com/guides/right-to-left/
However, does anybody know if it is possible to do for one item only (without changing the theme and body direction)?
in my case it's a Select item
Tell me which tool to use based on material for design with react components?
Try http://www.material-ui.com - for reactjs, but there is no responsive grid
Try https://github.com/react-materialize/react-materialize - This lib is not reliable and difficult for stability working of the application
material-ui already uses flexbox for their layouts. The components themselves are responsive as well. It seems that they did implement a grid layout. However, it looks like it's only available in the pre-release branch. The way I see it you have three options here:
Implement your own responsive grid using flexbox
Use a grid layout library, such as react-grid-layout(for React) or flexboxgrid
Get their pre-release channel npm install material-ui#next
I have a tab setup similar to this code. I need to change the active tab programmatically.
I'm trying to do like it is documented on bootstrap's official documentation but it doesn't work.
Try using the native javascript document.getElementById(tabId).click();.