How to add styled components in Material UI using React?

Styled Components, a highly acclaimed library within the React ecosystem, empowers developers to utilize CSS-in-JS, presenting advantages such as encapsulation, reusability, and simplified style maintenance. On the other hand, Material-UI stands as a widely embraced UI component library for React that diligently adheres to the principles of Material Design. It offers an extensive selection of customizable pre-built components. While Material-UI comes equipped with its own styling solution known as makeStyles, it seamlessly integrates with Styled Components, enabling developers to leverage the combined capabilities of both libraries.

Our exploration revolves around the installation process, specifically highlighting the @mui/styled-engine and @mui/styled-engine-sc packages. These packages provide developers the flexibility to choose between Emotion and Styled Components when styling Material UI components. With clear code examples and comprehensive instructions, this guide equips developers with the knowledge required to harness the potential of styled components, enabling the creation of visually striking and easily maintainable user interfaces within the Material UI framework.

In this comprehensive guide, we delve into the process of seamlessly integrating styled components into the Material UI by utilizing the powerful capabilities of React.

What exactly are styled components?

Styled Components, a renowned library within the React ecosystem, empowers developers to write CSS-in-JS, enabling them to define and apply styles directly within their JavaScript code. This innovative approach offers a multitude of advantages, including encapsulation, reusability, and simplified style maintenance.

On the other hand, Material-UI is an extensively utilized UI component library for React that meticulously adheres to the guidelines of Material Design. It presents developers with an extensive collection of pre-built components, all of which are customizable, thereby facilitating the creation of visually stunning user interfaces. Although Material-UI boasts its own styling solution known as makeStyles, it is fully compatible with Styled Components, allowing developers to harness the combined potential of both libraries.

The Emotion library serves as the default styling solution utilized for generating CSS styles for Material UI components. Every Material UI component relies on the styled() API to seamlessly inject CSS into the page. This API is supported by various prominent styling libraries, thereby offering the flexibility to seamlessly transition between them within the Material UI framework.

Installation Process

To begin incorporating Styled Components into Material-UI, a series of requisite packages must be installed. If Styled Components are already present in your project, you can exclusively employ them. Material-UI offers two distinct packages to choose from: @mui/styled-engine and @mui/styled-engine-sc.

The former, which acts as the default package, encompasses Emotion's styled() API along with supplementary utilities. The latter, meanwhile, serves as a similar wrapper specifically designed for Styled Components. Depending on your preferences and requirements, you can effortlessly configure your project to utilize either package.

Installation via npm

$ npm install @mui/material @mui/styled-engine-sc styled-components

Configuration

The configuration is done in the webpack.config.js file of the react project.

module.exports = {
   //...
+  resolve: {
+     alias: {
+        '@mui/styled-engine': '@mui/styled-engine-sc'
+     },
+  },
};

Installation via yarn

$ yarn add @mui/material @mui/styled-engine-sc styled-components

Configuration

The configuration is done in the package.json file of the react project.

{
   "dependencies": {
-     "@mui/styled-engine": "latest"
+     "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
   },
+  "resolutions": {
+     "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
+  },
}

Installation in Next.js

$ npx create-next-app@11.1.0
$ cd my-next-app
$ yarn add @mui/material @mui/styled-engine-sc styled-components

Implementing Styled Components in Material-UI

To incorporate Styled Components into Material UI, you can easily apply customized styles, to each Material UI component. By using the styled function provided by Styled Components, you can define styles for components.

The CSS rules you create will be limited to their components, which ensures that styles won't conflict with each other. Moreover, you have the option to create styled-components by extending Material UI components and applying styles to them. This ensures a visually pleasing look, throughout your application.

Example 1

When using the styled engine sc package in the given example developers can utilize the styled function from the @mui/system package. This function allows for the creation of styled components, by taking a CSS, in JS object as input.

//import react and styled component from styled-engine-sc
import * as React from "react";
import { styled } from "@mui/system";

//create a styled div
const StyledDiv = styled("div")`
   display: flex;
   flex-direction: column;
   width: 40em;
   gap: 2em;
`;

//create a styled text area input
const StyledTextArea = styled("textarea")`
   padding: 10px;
   border: 1px solid green;
   border-radius: 4px;
   height: 10em;
`;

//create a styled button
const StyledButton = styled("button")`
   background-color: #189e02;
   color: #fff;
   box-shadow: 0 4px 6px green, 0 1px 3px black;
   padding: 7px 14px;
   border-radius: 5px;
   &:hover {
      background-color: #18ac00;
   }
`;

//main function App component
function App() {
   return (
      <StyledDiv>
         <h1>Styling Material UI using Styled Components</h1>
         <StyledTextArea />
         <StyledButton>Add</StyledButton>
      </StyledDiv>
   );
}
export default App;

Output

Example 2

When you use the styled engine package in the given example as a developer you get access, to an in depth API for creating styled components. This package also empowers you to create your custom styled engines using the createStyled function from @mui/styled engine. By making use of the styled engine package developers have flexibility and control, over the styling engine enabling them to customize it according to their needs and preferences.

//import react and styled component from styled-engine
import * as React from "react";
import { styled } from "@mui/material/styles";

//create a styled div
const StyledDiv = styled("div")`
   display: flex;
   flex-direction: column;
   width: 40em;
   gap: 2em;
`;

//create a styled input for email
const StyledInputEmail = styled("input")`
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 4px;
   outline: none;
`;

//create a styled input for password
const StyledInputPass = styled("input")`
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 4px;
   outline: none;
`;

//create a styled button
const StyledButton = styled("button")`
   background-color: #189e02;
   color: #fff;
   box-shadow: 0 4px 6px green, 0 1px 3px black;
   padding: 7px 14px;
   border-radius: 5px;
   &:hover {
      background-color: #18ac00;
   }
`;

//
function App() {
   return (
      <StyledDiv>
         <h1>Styling Material UI using Styled Components</h1>
         <StyledInputEmail type="email" placeholder="Enter your email" />
         <StyledInputPass type="password" placeholder="Enter your password" />
         <StyledButton>Submit</StyledButton>
      </StyledDiv>
   );
}

export default App;

Output

Conclusion

The article offers insights on integrating styled components into the Material UI using React. With its CSS in JS approach, styled-components provide developers with advantages such as encapsulation, reusability, and simplified style maintenance. Material UI, a UI component library that follows Material Design principles offers a wide range of pre-built components that can be easily customized.

To harness the combined potential of both libraries developers can. Configure either the @mui/styled engine sc or @mui/styled engine packages. These packages allow the use of styled components as a styling solution, within the Material UI framework. By providing code examples and detailed instructions this guide equips developers with the knowledge to create visually appealing and easily manageable user interfaces.