How to do margin left on mui button in react js?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To do margin left on mui button in React js, set margin-left: 50px !important in MuiButton-root. It will do margin left on mui button.

Today, I am going to show you, how to do margin left on mui button in react js.

Installation

Install the following packages to use mui margin left in react js.

npm

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

yarn

yarn add @mui/material @emotion/react @emotion/styled

MUI material does margin left on mui button example.

The below code is an example of doing margin left on mui button using mui button.

App.js

import * as React from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import "./App.css"

export default function BasicButtons() {
  return (
    <Stack spacing={2} direction="row">
    
      <Button variant="contained">Contained</Button>
     
    </Stack>
  );
}

.MuiButton-root {
  margin-left: 50px !important
}

In the above code example, I have used the @mui/material component and do margin left on mui button of MUI.

Check the output of the above code example.

All the best 👍