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.

For components tab, it is divided into 3 section (as you can see it in the panel on your left side).

Material-UI Extended

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"

Community Custom

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

March 20, 2019

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 (overline heading & 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"

Complex Composition

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 would be Card that contains other component like CardHeader, CardContent, CardFooter, CardActions and any custom component. Give the component a new name is better than trying to use the same CSS Api. For example, BlogCard, PlaneTicketCard

import React from 'react';
import cx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia';
import AirplanemodeActive from '@material-ui/icons/AirplanemodeActive';
import VerticalTicketRip from '@mui-treasury/components/rip/verticalTicket';
import { useVerticalRipStyles } from '@mui-treasury/styles/rip/vertical';

const mainColor = '#003399';
const lightColor = '#ecf2ff';
const borderRadius = 12;

const useStyles = makeStyles(({ palette, breakpoints }) => ({
  card: {
    overflow: 'visible',
    background: 'none',
    display: 'flex',
    minWidth: 343,
    minHeight: 150,
    filter: 'drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3))',
    '& $moveLeft, $moveRight': {
      transition: '0.3s',
    },
    '&:hover': {
      '& $moveLeft': {
        transform: 'translateX(-8px)',
      },
      '& $moveRight': {
        transform: 'translateX(8px)',
      },
    },
    [breakpoints.up('sm')]: {
      minWidth: 400,
    },
  },
  left: {
    borderTopLeftRadius: borderRadius,
    borderBottomLeftRadius: borderRadius,
    flexBasis: '33.33%',
    display: 'flex',
    backgroundColor: '#fff',
  },
  media: {
    margin: 'auto',
    width: 80,
    height: 80,
    borderRadius: '50%',
  },
  right: {
    borderTopRightRadius: borderRadius,
    borderBottomRightRadius: borderRadius,
    flex: 1,
    padding: 12,
    display: 'flex',
    alignItems: 'center',
    textAlign: 'center',
    backgroundColor: lightColor,
  },
  label: {
    padding: '0 8px',
  },
  heading: {
    fontSize: 24,
    fontWeight: 'bold',
    margin: 0,
    marginBottom: 4,
  },
  subheader: {
    fontSize: 12,
    margin: 0,
    color: palette.text.secondary,
  },
  path: {
    flex: 1,
    flexBasis: 72,
    padding: '0 4px',
  },
  line: {
    position: 'relative',
    margin: '20px 0 16px',
    borderBottom: '1px dashed rgba(0,0,0,0.38)',
  },
  plane: {
    position: 'absolute',
    display: 'inline-block',
    padding: '0 4px',
    fontSize: 32,
    backgroundColor: lightColor,
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%) rotate(90deg)',
  },
  flight: {
    fontSize: 14,
    lineHeight: '24px',
    minWidth: 48,
    padding: '0 8px',
    borderRadius: 40,
    backgroundColor: '#bed0f5',
    color: mainColor,
    display: 'block',
  },
  moveLeft: {},
  moveRight: {},
}));

export const PlaneTicketCardDemo = React.memo(function PlaneTicketCard() {
  const styles = useStyles();
  const ripStyles = useVerticalRipStyles({
    size: 24,
    rightColor: lightColor,
    tearColor: mainColor,
  });
  return (
    <Card className={styles.card} elevation={0}>
      <div className={cx(styles.left, styles.moveLeft)}>
        <CardMedia
          className={styles.media}
          image={
            'https://dejpknyizje2n.cloudfront.net/marketplace/products/yin-yang-two-fighting-dragons-sticker-1538772130.3390164.png'
          }
        />
      </div>
      <VerticalTicketRip
        classes={{
          ...ripStyles,
          left: cx(ripStyles.left, styles.moveLeft),
          right: cx(ripStyles.right, styles.moveRight),
        }}
      />
      <div className={cx(styles.right, styles.moveRight)}>
        <div className={styles.label}>
          <h2 className={styles.heading}>BEK</h2>
          <p className={styles.subheader}>Beijing China</p>
        </div>
        <div className={styles.path}>
          <div className={styles.line}>
            <AirplanemodeActive className={styles.plane} />
          </div>
          <span className={styles.flight}>AB256</span>
        </div>
        <div className={styles.label}>
          <h2 className={styles.heading}>DMK</h2>
          <p className={styles.subheader}>Don Meaung</p>
        </div>
      </div>
    </Card>
  );
});

export default PlaneTicketCardDemo;

See the code

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