How to change ripple size of mui checkbox in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To change ripple size of mui checkbox in React js, you can use padding: 50px !important; in .MuiButtonBase-root. It will change ripple size of mui checkbox.

Today, I am going to show you, how to change ripple size of mui checkbox in react js.

Installation

Install the following packages to use change ripple size of mui checkbox in react js.

npm

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

yarn

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

MUI material change ripple size of checkbox example.

The below code is an example of a Material UI Checkbox that is change ripple size, The formcontrollabel component is a wrapper. which is used to control the label of the checkbox. To change the size of the ripple in mui checkbox, padding 50px has to be set.

App.js

 import * as React from 'react';
 import Checkbox from '@mui/material/Checkbox';
 import { FormControlLabel } from '@mui/material';
 import "./App.css"

 export default function ColorCheckboxes() {
   return (
     <FormControlLabel
     control={
       <Checkbox 
       />
     }
     label="My Checkbox"
   />
   );
 }

App.css

.MuiButtonBase-root{
  padding: 50px !important;
}

In the above code example, I have used the @mui/material component and change ripple size of mui checkbox.

Check the output of the above code example.

All the best 👍