综合技术

MUI System will make your life easier

微信扫一扫,分享到朋友圈

MUI System will make your life easier
0

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.

阅读原文...


微信扫一扫,分享到朋友圈

MUI System will make your life easier
0

Bits And Pieces

这家不为人所知的公司 为手机芯片做出了巨大贡献

上一篇

This Simple Acronym Will Help You Foster Effective Team-Building Skills

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

MUI System will make your life easier

长按储存图像,分享给朋友