Before you begin browsing
What is this page for?
This page shows how to maximize the benefit of Material-UI Treasury. Please read to the end of the page if this is the first time you have seen it.
components tab, it is divided into 3 section (as you can see it in the panel on your left side).
These are components that are extended from Material-UI directly. We aim to showcase them in a more practical way, closer to how we use them in real life.
For example, Birthday TextField
This component uses the official
InputBase as a main ingredient,
then compose with some react hook logic and turn it to a powerful form input. (Most of these have test coverage)
yarn add @material-ui/core yarn add @mui-treasury/components // in react component import Birthday from "@mui-treasury/components/textField/birthday"
For this category, the main ingredient is the official styling solution plus developer’s creativity. Mostly, they are inspiration from mockup or visual design that we want to turn them into life. Some material-ui can be included but the majority are native html elements.
For example, TextInfo CardContent
Nature Around Us
We are going to learn different kinds of species in nature that live together to form amazing environment.
It is composed of 3
Typographys with specific responsibility (
body). Then we create a bunch of
different styles that follow the same api (think of them like Lego that should match in order to be compatible).
See all TextInfoContent styles
yarn add @mui-treasury/components // in react component import TextInfoContent from "@mui-treasury/components/content/textInfo"
Finally, whatever components that you think it is complex (compose of other category’s component) lay on this category.
This group is hard to have different styles because the CSS Api is quite different from each other. The most obvious component
Card that contains other component like
CardActions and any custom
component. Give the component a new name is better than trying to use the same CSS Api. For example,
Another important point is this category is not available in
@mui-treasury/components since they are too specific and hard
to be customized again. But if you like, you can copy the code in the website and then use it in your project.
Not available in @mui-treasury/components