Intro to styles

How to apply styles?

The way to use Mui-treasury is to think like composing legos. There are just 2 pieces, component and style. Both can be simple or complex depend on shape and feature.

First select the main lego (component) then the other lego (style) need to be compatible with the component otherwise they won’t fit together and the result is not what you expected.

Which style is compatible?

You will see on your left that we categorize into 2 sections.

1. Material-UI base component : this works right away with Material-UI v4.x component. All you need to do is

import React from 'react';
import Button from '@material-ui/core/Button';
import { useGithubBtnStyles } from '@mui-treasury/styles/button/github';
import { usePushingGutterStyles } from '@mui-treasury/styles/gutter/pushing';

const GithubButton = () => {
  const styles = useGithubBtnStyles();
  const gutterStyles = usePushingGutterStyles();
  return (
    <div className={gutterStyles.parent}>
      <Button classes={styles} variant={'contained'}>
        Default
      </Button>
      <Button classes={styles} variant={'contained'} color={'primary'}>
        Contained
      </Button>
    </div>
  );
};


export default GithubButton;

use…Styles is the result of official makeStyles Api. Read more about makeStyles Api

2. Custom components : These styles can be applied to Community Custom and Complex Composition component. the styles is compatible with the component if the name matches.

For example, useBlogTextInfoContentStyles is compatible with TextInfoContent component.

28 MAR 2019

What is Git ?

Git is a distributed version control system. Every dev has a working copy of the code and...

import React from 'react';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';
import CardContent from '@material-ui/core/CardContent';
import TextInfoContent from '@mui-treasury/components/content/textInfo';
import { useBlogTextInfoContentStyles } from '@mui-treasury/styles/textInfoContent/blog';

const BlogTextInfoContentStyle = () => {
  const styles = useBlogTextInfoContentStyles();
  return (
    <Box maxWidth={343}>
      <CardContent>
        <TextInfoContent
          useStyles={useBlogTextInfoContentStyles}
          overline={'28 MAR 2019'}
          heading={'What is Git ?'}
          body={
            'Git is a distributed version control system. Every dev has a working copy of the code and...'
          }
        />
        <Button className={styles.button}>Read more</Button>
      </CardContent>
    </Box>
  );
};

export default BlogTextInfoContentStyle;

That’s all you need to know about how to use mui-treasury. Happy styling!