MUI System will make your life easier

T his story might change the way you write CSS and clean up your code. Let’s started by looking at this example.

An example situation that we face in daily life all the time

Let’s say, you need to move Icon to the right of the Text, what would you do? Think about it for a sec.

The simplest way to do it is to add className to the parent and write style sheet that make it become a flexBox with justify-content: space-between and align-items: center .

It seems easy, isn’t it. But can it be easier?

The answer is Yes!

What if I told you that you can write something more declarative instead of adding className and CSS like the traditional way. Here is the short version.

// Box is a simple react component that render div

<Box display="flex" justifyContent="space-between">
  <p>Primary Text</p>
  <Icon>star</Icon>
</Box>

<div className="parent">

The first library I found that make this happened is styled-system . Material-UI applied this approach in its React library. You will enjoy building UI when you use Box or the components that are “styled”.

Box in Material-UI comes with many predefined properties such as bgcolor (background-color) , display , m (margin) , p (padding) , width , height , and a lot more.

import { unstable_Box } from '@material-ui/core/Box'
// stable version will be in v4

// manual value
<Box
  bgcolor={'#f5f5f5'}
  m={'10px'} // margin: 10px;
  pb={'10px'} // padding-bottom: 10px;
/>

// access to theme
<Box
  bgcolor={'primary.main'}
  m={2} // margin: 16px;
  pb={1} // padding-bottom: 8px;
/>

If you confuse why m={2} equal to 16px , I will explain in more detail in the next story (Design Consistency with MUI System). Right now, I just want you to know how easy and simple it is. Try it here.

https://codesandbox.io/s/kkm77vpk0r

Moreover, You can enhance any MUI components to have this special ability by writing just a few lines of code.

// Ex. Typography

import { compose, color, typography } from "@material-ui/system";

const Text = styled(Typography)(
  compose(color, typography)
);

<Text color="primary.main">Test</Text>

https://codesandbox.io/s/0or7z65v4v

Even create new CSS properties and reuse it over and over again.

import { style } from '@material-ui/system'

const flexGlow = style({
  prop: "flexGrow",
  cssProperty: "flexGrow"
});

const Text = styled(Typography)(
  compose(color, typography, flexGlow)
);

<Box display="flex">
  <Text flexGrow={1} fontSize={20}>Test</Text>
  <Text fontSize={20}>Test</Text>
</Box>

https://codesandbox.io/s/0or7z65v4v

That’s it. Now you can see how to make your life easier using MUI System.

I believe that this is the future of building components

I hope you enjoy this story. See you next time, bye bye (Give me some clap if you like it). Thanks for reading!

Tip: Use Bit to easily share and reuse components to build apps. It’s free and open source, so feel free to jump in and make your components reusable.