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
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
enter image description here
I make this web app using react.js and I tried very much to do Responsive for mobile devices but I couldn't, any one solve this problem please.
I used useMediaQuery from material ui which helps very much in creating responsive site.
Here is the documentation for it.
After then for displaying responsive components
You can create new components that are fit to that window size
You can use states for toggling for the different window sizes
And then you can import them as you want.
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 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
https://material.io/design/iconography/animated-icons.html
I attached link above how can i integrated icon in my react application there is not have any code.
I think it is not supported out of the box by material-ui, but you can use css transitions to accomplish it.
Maybe this lib can solve it for you or at least inspire your implementation?
https://mui.wertarbyte.com/#material-ui-toggle-icon
Their implementation looks pretty nice, well documented and MIT: https://github.com/TeamWertarbyte/material-ui-toggle-icon
Google Material does not provide an implementation of their icons with animations. They do; however, provide a specification/guideline for animation with Material Icons.
In addition; you can download the SVG Icons here as needed: https://material.io/tools/icons/
and import into your code.