Material UI: React Component Library

Introduction Material UI, or MUI, is an open source React component library used for building and designing user interface. MUI allows applications to be built quickly by offering out-of-the-box components. The library allows developers to provide a custom theme for their application, as well as customization options for individual components. This article will show how to create a custom theme, import components for use, and demonstrate the use of the stack component. Installation Material UI can be installed using npm or yarn. React and react-dom are peer-dependencies, so you must install these packages as well in order to use MUI. npm install @mui/material yarn add @mui/material Components Once MUI is installed along with its peer dependencies, the components can be imported and used to build your application. Import the component at the top of the file you want to use it. The below code block shows how to import the Button, Dialog, and List component. import Button from '@mui/material/Button'; import Dialog from '@mui/material/Dialog'; import List from '@mui/material/Button'; Components can also be imported using destructuring. import { Button, Dialog, List } from '@mui/material'; Once the component is imported it's available to be used as is. Customization MUI offers properties for each component that can be used for customization. Properties for each component are available on the MUI docs under the Component API tab. Material UI Docs Properties are assigned inside of the opening tag of the component. Here's an example of assigning property values when working with the button component. Button Button Button All components have an sx property available to them, which is used to for system overrides as well as other CSS styles that are not direct properties of a component. Button Themes MUI offers the ability for users to create custom themes. This feature enables users to maintain consistency between like components across the application, as well as the ability to create a custom color palette. Import the createTheme function and ThemeProvider component. import { createTheme, ThemeProvider } from '@mui/material/styles'; The createTheme function accepts an object argument, with the properties equal to the element for the styles to be applied to. Set a variable equal to the invocation of the createTheme component on your custom theme object. const theme = createTheme({ components: { MuiButton: { styleOverrides: { root: { width: 100, backgroundColor: 'blue' } } } } }); The components property is used to define which MUI component will be effected by the styles. The styleOverrides property is used to override the styles of components. In this case, we are overriding the styles of Button root components. Once you are happy with the theme you have created, you need to wrap the component you want the theme to apply to in the ThemeProvider tag, and supply the theme variable name to the theme property. We can also use CSS classes of components to define style overrides. The classes for each component exist on the components API within the MUI docs. We can put a '&.Mui-disabled' (must be in quotes) property on our root property object to define the styles of any disabled Button component. This is just one way to define styles for components. I recommend looking into the documentation for custom themes on the Material UI docs, as well as the docs on creating custom palettes. Themes Palette Containers Lastly, MUI offers different containers for grouping components to be displayed on the page. One of those components is Stack, which can be used to group elements vertically or horizontally. import { Stack } from '@mui/material'; One Two Three The spacing property determines how far apart the elements will be from each other. The default direction of the stack is vertical. To stack the elements in a row, set the direction property equal to "row". import { Stack } from '@mui/material'; One Two Three For more complex, two-dimensional designs, MUI offers the Grid component. You can read the documentation here. Conclusion Material UI emphasizes speed and efficiency in enabling developers to build and customize web applications. Their are many more, ready-to-use, well-documented components and customization options available to developers using Material UI. This article only scratches the surface of what Material UI has to offer. Sources: Material UI Documentation MUI Button MUI Themes MUI Stack

npm install @mui/material
yarn add @mui/material

import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import List from '@mui/material/Button';

import { Button, Dialog, List } from '@mui/material';

<Button />
<Dialog />
<List />

<Button variant="text" color="black">Button</Button>
<Button variant="contained" size="large">Button</Button>
<Button variant="outlined" disabled>Button</Button>

<Button
  variant="contained"
  sx={{ 
  backgroundColor: 'purple',
  width: 200,
  color: 'white',
 }}
>Button
</Button>

import { createTheme,                         
         ThemeProvider                                    
       } from '@mui/material/styles';

const theme = createTheme({
components: {
 MuiButton: {
  styleOverrides: {
   root: {
    width: 100,
    backgroundColor: 'blue'
    }
   }
  }
 }
});

<ThemeProvider theme={theme}>
 <YourComponent /> 
<ThemProvider />

import { Stack } from '@mui/material';
      <Stack spacing={6}>
        <Item>One</Item>
        <Item>Two</Item>
        <Item>Three</Item>
      </Stack>

import { Stack } from '@mui/material';
      <Stack direction="row" spacing={3}>
        <Item>One</Item>
        <Item>Two</Item>
        <Item>Three</Item>
      </Stack>

Related Posts

Asynchronous Python: What You Need to Know

Jan 12, 2025  0

How to Image Upload with CKeditor in Laravel 11 Tutorial

Jan 11, 2025  0

How to market your idea

Jan 12, 2025  0