Custom Design in Material UI - reactjs

the landing page of Material UI has slick design (both layout and components). I wonder if I can use this design instead of default Material Design. I couldn't find any information about this design in the docs.

I believe you are looking for the source code of mui documentation website. Here's the link
If you are looking for theme specifically then this link should help you.

If you mean their home page, it's actually designed by Material UI, you can check this by seeing the source page.
Mostly Material UI components in the home page are designed using makeStyle so they are not in the default style.
https://mui.com/styles/api/#heading-makestyles-styles-options-hook

Related

How to use MUI inside CMS library?

We are currently using React Material UI for a big e-commerce site that requires a CMS.
The problem is that we need to give the elements in the CMS (that are configurable as pure HTML containers) the ability to use the same component animation and style as what we used in the MUI configuration in react.
Is there any way we can achieve this?
In other words, how can we create a html library from React Material UI?

AgGrid React Material UI

Any good examples out there of using AgGrid with React Material UI. Especially around creating custom themes. The examples on the AgGrid site are around css / scss not styled components the preferred approach with React Material UI.
Although it might not be exactly what you are looking for. Try searching for
component types and custom renderers as it contributes to customizing your ag-grid look

Use of material design components in codename one

Is there a way to intergrate material design components in my application? I find them very nice and would like to add them to my application.

Removing or hiding the gatsby starter toolbar

I using the Gatsby Material Starter kit for a personal project (essentially to learn Ract and Gatsby). https://github.com/Vagr9K/gatsby-material-starter
The design I want is to have a homepage that doesn't render the toolbar in the header (the toolbar that containers the hamburger navlist). The homepage has a big body and footer but no header ie a giant 'hero'.
After a few hours of hacking with layouts and templates there must be an elegant way to achieve this design ? Any direction or working code to share ?
All the pages in Gatsby Material Starter are wrapped with a MainLayout component to provide consistent styling.
In it's turn, MainLayout uses the Navigation component to render a NavigationDrawer while passing the styling information to it.
If you want to change the fixed toolbar, then you'll have to replace it with Toolbar and Drawer components from react-md.
NOTE: I would not recommend learning ReactJS like this, since GatsbyJS adds additional complexity (that's specific to it) and starters (or any other pre-made projects like this) aren't easily customizable unless you have previous experience with React.
Disclaimer: I'm the author of Gatsby Material Starter.

Material UI or Reactstrap

I need a frontend UI for my react web application and I was looking to Material UI and Reactstrap. Which one do you think is better and easier for begginers to understand? Also are there any tutorials for either them because I found both of their documentations confusing.
I am confused about how to incorporate the components and than customize them as well
About customizing them, there is a section explaining about it and they provide examples as well.
You only need to import the component you want and plug it to your React apps just like regular React component.
As for API part on Material UI, most of them consist of 3 parts (Props, CSS API, Demos) for each component. The props section provide you with all the available props for the corresponding component. For example the Button props API, it list all the available props you can provide for the Button component
CSS API section is the section you would want to look for when you want to customize the component, it list all the available keys for you to override, in my opinion it's best to look at the corresponding component implementation before customizing it because I find it a bit tricky. The source are available for public on their Github repo

Resources