These features will change the way you work with the Material UI

As a front end engineer, The Material-UI is my favorite styling option for the React component. Its sleek design and elegant style make it stand out from the crowd.

That said, I’ve recently discovered some interesting facts about using The Material-UI in practice. In this article, I want to bring these things to you because I find them very interesting.

Prerequisite: Familiarity with the basics of Material-UI will help you fully grasp the content of this article.

1. Automatically change colors

Whether you’re building a website or a mobile app, having a dark mode is crucial for modern apps. You don’t want users to be blinded by a white screen when they’re using the app at night.

Dark mode is very easy to implement with the Material UI, as it has two color palettes with light and dark themes. You can switch to a dark theme by setting the type to dark.

const darkTheme = createMuiTheme({
Copy the code

Most of us know this feature. So some of you might be thinking, what’s so special about it?

Let’s say you have a button with a black foreground. In this case, if you change the app theme preference to dark, and the background color defaults to black, the Material UI will adjust the color of the button to contrast it with the background.

Let me explain again.

If an element (for example, a button) has a black background and foreground color, the Material UI adjusts the foreground color of the button accordingly.

Amazing, isn’t it?

Because of this feature, we don’t have to worry too much about non-contrast elements in our application in dark mode.

One thing to note: this automatic adjustment will not happen if you override the button color by force.

2. Interoperability

The Material UI essentially provides a JSS based styling system for designing your components. However.

Did you know that Material UI can be combined with styling mechanisms such as Plain CSS, Global CSS, Styled-Components, CSS modules, Emotion, etc.?

Yes, it’s possible! You can find detailed information on this here.

Just to give you an overview, the Material UI does not restrict you to using only JSS based styling. If you prefer stylized components or CSS modules, feel free to use them in the Material UI. In my opinion, this flexibility is very important in expanding the scope of the styling library.

There are a few things you should keep in mind if you are going to combine JSS based styling with the Material UI.

1. Control priorities

JSS typically injects styles into. To ensure that your custom styles are not overwritten, you need to define the order in which CSS is injected when you use normal CSS, global CSS, styling components, CSS modules, etc.

Let’s look at an example of how to change the injection order of CSS when you combine styling components with a Material UI.

import { StylesProvider } from '@material-ui/core/styles';
Copy the code

Another way to override Material UI styles is to use them for your custom styles!! Key keywords. However, this approach may not seem as clean as changing the injection order.

(2) portal

Portals provide a way to render child nodes to DOM nodes that exist outside the DOM hierarchy. However, if you combine the Material UI with styled components, components rendered through Portal will not be rendered properly due to the scope of the styles.

The Material UI also provides a solution to this problem.

import React from 'react';
Copy the code

The class name must be passed to the menu rendered through the portal. You can find a complete reference in the Material UI documentation.

3. Switch between RTL and non-RTL

Material UI has the ability to support RTL languages such as Arabic, Farsi, etc. If you’ve been working with Material UI for a while, you probably already know that.

However, did you know how easy it is to switch between RTL and non-RTL using the Material UI?

If you want a particular rule set to opt out of RTL and the rest to use RTL, you just do the following. (Source: Material-UI documentation)

import React from 'react';
Copy the code

When your entire application uses RTL, if you want an element to be LTR, you simply use “flip: false” for that particular style.

4. Integration with the design toolkit

With recent releases, Material UI has enabled support for various design suites. Some of them do.

  • FeiGeMa
  • The sketch
  • Adobe XD

Their goal is to achieve maximum developer productivity by integrating these design toolkits with the Material UI.

The Material UI has promised to maintain functional equality between these tools.

Integration of these design suites is a paid feature of the Material UI. However, it only requires a one-time payment. Once purchased, you can use it for life.

5. Unstylized components

The Unstyled component of the Material UI is an upcoming feature, but definitely worth watching.

What is an unstylized component?

Suppose you need to have a fully customized design in your application, but you also need the benefits that the Material UI provides. In this case, overwriting all the styles provided by the Material UI would be cumbersome, because you would have to cover so many styles.

In an upcoming release, Material UI provides a solution by providing unstylized components. The gzipped weight of the unstylized component is 5.2KB, while the gzipped weight of the stylized component is 26KB. So if you need a fully customized design and theme, this is also an improvement on the size of your bag.

You can download the Unstyled package of the Material UI using the following command.

yarn add @material-ui/unstyled@next
Copy the code

If you want to import style-free packages, use your custom themes on all but a few components, you can do so easily. All you have to do is use the stylled() on your Unstyled component and apply the Material UI core style on a few components.

This will transform the unmolded component into the molded component of the Material UI core. However, this is still in the alpha version. If you’re interested in learning about the upcoming features of Material UI, you can check out this space.

conclusion

The Material UI has a lot of cool features and a lot of interesting future features. I found most of these features to be very useful, especially features like auto color change. Let me know your experience with the Material UI and any interesting facts you’d like to share with the community.

Thanks for reading!

Build and share React components with bits

Bitbits is a super extensible tool that lets you create truly modular applications with components written, versioned, and maintained independently.

Use it to build modular applications and design systems, write and deliver miniature front ends, or simply share components between applications.

A range of remote bits with Material UI based components, each source controlled and shared independently

Bit: Platform for modular networks

To learn more

  • Build a React design system to facilitate adoption and expansion
  • Use Storybook in Bit
  • There are four ways to override the Material UI style
  • Build the React component library — the right way

Originally published on Bits and Pieces on Medium, people continue the conversation by highlighting and responding to the story.