React MUI Unstyled Components

In React, Material-UI is a popular library for creating user interfaces that follow Google’s Material Design guidelines. The library provides a set of styled components that you can use in your React application, such as Buttons, Input, and Paper.

Unstyled components refer to components that are not styled using Material-UI’s predefined styles. This means that you can use the basic structure of a Material-UI component, but you will have to provide your own styles to customize the appearance of the component. Some of the inbuilt ways to provide styling or give your custom styles to unstyled components include:

1. Customizing the Theme: Material-UI provides a way to customize the theme to match your brand’s visual identity, by using the createTheme function. This allows you to change the color palette, typography, and other styling options for unstyled components.
2. Overriding Styles: Material-UI allows you to override the default styles of its components by using the withStyles higher-order component. This can be used to add custom styles to unstyled components that use Material-UI’s styling classes.

Syntax:

import { MyComponent } from '@mui/base';
return (
    <MyComponent />
):

Creating React Project:

Step 1: To create a react app, you need to install react modules through the npm command in your current repository.

npm create-react-app ./

Step 2: To use an unstyled Material-UI component, you can import it from the @mui/base/ module and use it like any other component. To install it run one of the following commands to add MUI Base to your project: 

npm install @mui/base

Step 3: to use styled-components run the following command:

npm install @mui/material @emotion/react @emotion/styled

Project Structure: The project structure should look like below: 

Step to Run Application:

npm start

Example 1: Here is an example of how you might use the unstyled button component :

• App.js

Javascript

import React from 'react';

import { ButtonUnstyled } from '@mui/base';
import { Button } from '@mui/material';
import { Typography } from '@mui/material';

const App = () => {
    return (
        <>
            <Typography variant='h1' color="green">
                WELCOME TO GEEK FOR GEEKS
            </Typography>
            <ButtonUnstyled>start</ButtonUnstyled>
            <Button color="secondary"
                    style={{ margin: '10px 10px' }}
                    variant='contained' >
                 start
            </Button>
        </>
    );
}

export default App;

• index.js

Javascript

import React from "react";
import  ReactDOM  from "react-dom";
import App from './App';

ReactDOM.render(<App />,document.getElementById('root'));

Output:

the final image of an unstyled button component and styled component in material ui

Example 2: Here is an example of how you use the unstyled input component :

• App.js

Javascript

import React from 'react';

import { InputUnstyled } from '@mui/base';
import { Typography } from '@mui/material';
import { Input } from '@mui/material';
const App = () => {
    return (
        <>
            <Typography variant='h1' color="green">
                WELCOME TO GEEK FOR GEEKS
            </Typography>
            <InputUnstyled />
            <Input placeholder="Placeholder"
                   style={{ margin: '10px ' }} />
        </>
    );
}

export default App;

• index.js

Javascript

import React from "react";
import  ReactDOM  from "react-dom";
import App from './App';

ReactDOM.render(<App />,document.getElementById('root'));

Output:

final image of an unstyled input component and styled component.