how to change mui button border radius in react js?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To change mui button border radius, set in style attribute borderRadius: 35,. It will change mui button border radius.

Today, I am going to show you, how to change mui button border radius in react js.

Installation

Install the following packages to use mui textfield in react js.

npm

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

yarn

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

First method: Inline css

MUI material change mui button border radius example.

The below code is an example of changing mui button border radius using mui.

App.js

import * as React from 'react';
import Button from '@mui/material/Button';

export default function BasicButtons() {
  return (
    <Button
    style={{
        borderRadius: 35,
        backgroundcolor: "#dehfuu",
        padding: "18px 36px",
        fontSize: "18px"
    }}
    variant="contained"
    >
    Submit
</Button>
  );
}

In the above code example, I have used the @mui/material component and changed mui button border radius of MUI.

Check the output of the above code example.

Second method: External CSS

MUI material change mui button border radius example.

The below code is an example of changing mui button border radius using mui.

App.js

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

export default function BasicButtons() {
  return (
    <Button variant="contained">
    Medium
  </Button>
  );
}

App.css

.MuiButton-root {
  border-radius: 35% !important;
}

In the above code example, I have used the @mui/material component and changed mui button border radius of MUI.

Check the output of the above code example.

All the best 👍