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.

React, Mui border radius

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.

React, Mui border radius

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

I'm working on some more Cheat Sheets book on Jquery, TypeScript, React js and for other languages. I will send it once it's completed.

Related Posts