Is there a way to modify the rounded corners of a checkbox in material-ui?

After importing material-ui into my react app, I was able to change the color and size of a checkbox as shown. However, I am having trouble changing the icon's border radius. How can I achieve this?


        import FormGroup from '@mui/material/FormGroup';
        import FormControlLabel from '@mui/material/FormControlLabel';
        import Checkbox from '@mui/material/Checkbox';

        const StyledCheckBox = () => {
            return <div>
                <FormGroup>
                    <StyledFormControlLabel
                        control={
                            <Checkbox
                                sx={{
                                  '& .MuiSvgIcon-root': {
                                        fontSize: 70,
                                        borderRadius: 20
                                    }
                                }}
                            />
                        }
                        label="Villa"
                    />
                </FormGroup>
            </div>
cssreactjscheckboxmaterial-ui

Answer №1

It's not possible to alter the border-radius of an SVG once it's rendered.

https://i.stack.imgur.com/ZJq4i.png

Changing the border-radius using CSS is not an option in this case.

If you want to customize it, you need to insert your icon like so:

<Checkbox icon={<CustomCheckbox/>} .../>

For more information, refer to the documentation on using custom icons with Checkboxes

Answer №2

MUI offers a variety of components that can be tailored to suit your specific needs.
Check out this link and the code snippet below.

import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
import CircleChecked from "@material-ui/icons/CheckCircleOutline";
import CircleUnchecked from "@material-ui/icons/RadioButtonUnchecked";
const App = () => {
  return (
    <div>
      <FormGroup>
        <FormControlLabel
          control={
            <Checkbox
              icon={<CircleUnchecked />}
              checkedIcon={<CircleChecked />}
              sx={{
                "& .MuiSvgIcon-root": {
                  fontSize: 70,
                  borderRadius: 20
                }
              }}
            />
          }
          label="Villa"
        />
      </FormGroup>
    </div>
  );
};

export default App;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the world of Material-ui icon designs

Explore the variety of themes available for icons on Material.io/icons. Is it possible to customize the theme of icons while using them? import AccessAlarmIcon from '@material-ui/icons/AccessAlarm'; ...

reactjsmaterial-designmaterial-ui

What is the best way to retrieve the current state from a different component?

My goal is to access a user set in another component. I passed the state from the highest component (which is the app) by utilizing this function for state change. handleRegisterSubmit(e, username, password) { e.preventDefault(); axios.post('/au ...

javascriptnode.jsreactjsreact-nativereact-router

Material-UI has officially deprecated the `css` function and is now recommending the use of the `styleFunctionSx` instead

I developed a component library called dot-components that is built on top of mui-org/material-ui. In another application utilizing my dot-components library, I have observed a console warning popping up during unit tests. Console Warning console.warn ...

reactjsmaterial-uistyled-components

Finding the image source of a clicked image

Is it possible to retrieve the image src after clicking on another image? $(document).ready(function() { $('img.getimage').click(function() { alert($(this).attr('src')); }); }); .sinistra { width: 150px; } .getimage { wi ...

jquerycssonclick

Switch the background color when a radio button is chosen

For my quiz on test practice with an array of questions, each question includes five radio buttons, but only one is correct. Initially, all five options have a gray background. Upon selecting a wrong option, it changes to red. If another incorrect option i ...

jqueryhtmlcss

Looking to integrate the date, month, and year selection tags into the inline format

The Edit User Profile page includes a Birthday field, which is currently displayed vertically. I am looking to change the layout so that the Birthday field appears horizontally. Here is the code I am using: Within visitors/edit.html.erb, <%= simple_f ...

javascripthtmlcssruby-on-rails-4datepicker

React component with element style declared in module.css file and conditional state

I'm in the process of developing a mobile dropdown feature for a React web application. I am looking for guidance on the proper syntax to use when incorporating multiple classes into a React element. My goal is to apply styles from an imported module ...

cssreactjsclassnext.jsclassname

How can I easily add both horizontal and vertical arrows to components in React?

Creating a horizontal line is as simple as using the following code: <hr style={{ width: "80%", border: "1px solid black" }} /> You can customize the width, length, and other properties as needed. If you want to display an arrow ...

javascriptcssreactjssvg

Encountering an undefined variable in the .env file

Once the .env file was created in the main React folder REACT_APP_API_KEY=gzomlK5CKLiaIWS.... I also installed the .env NPM library Despite this, I continued to receive undefined in the API file. What could be causing this issue? import React, { useState ...

javascriptreactjsenvironment-variables

Height of Hover Background Color in WordPress Menu

Greetings! Welcome to my website I'm in the process of modifying the hover color for the top menu, and I've managed to change it successfully. However, I would like the hover effect to cover the entire height of the menu, as right now it's ...

htmlcsswordpress

How to effectively manage multiple React apps using a single S3 bucket

When hosting React apps in my development and production environments using S3 static website hosting, I have found great success. I typically follow a bucket naming structure like dev-myapp-mycompany and prod-myapp-mycompany, with each environment having ...

reactjsamazon-web-servicesredirectamazon-s3deployment

Pass on URL parameters to state through redirection

When using the "react-router-dom" version 5.1.2, I encountered a situation where I needed to navigate to a specific URL: http://localhost:3000/#id_token=123&expires_in=3600&token_type=Bearer To handle this navigation, I set up a Redirect component ...

reactjsreact-router

Issues with LocalStrategy not executing in passport authentication

I am currently facing an issue with authenticating using Passport and LocalStrategy. It seems like the strategy is not being called and when I log the user object in passport.authenticate, it returns "false". Below is my client-side code: logIn = () =& ...

javascriptreactjsexpressauthenticationpassport.js

The child component is not displaying the default value being passed from the parent in the

Currently, I am in the process of developing a form using Reactjs that relies on defaultValues provided by the parent component. The issue arises when the parent component sets the values' states through an axios post and then passes them down to the ...

reactjsmaterial-uitextfield

The problem I am facing is with the React Ant d Modal Component, where I am unable to render the

Hey there! I'm currently working with React Js and the 'Ant design Modal Component'. When I click on a button, the modal should open and display the content of each user with their unique ID. However, I'm facing an issue where all modal ...

javascriptreactjsantdant-design-pro

I am attempting to implement a feature that changes the color of buttons when they are clicked within an ng-repeat loop

A problem is occurring with the ng-class directive in this HTML code, which is generating seats using the ng-repeat directive. The colors are not being added properly when a seat is selected. If you'd like to view my code, it can be found in this JSf ...

cssangularjsangularjs-ng-repeatng-class

Hide a parent div in jQuery depending on the checkbox status

I have a code snippet that I need help with. You can view the code here. $("#filters :checkbox").change(function() { $(".listing-details > div").hide(); $("#filters :checkbox:checked").each(function() { $(".listing-details ." + $(this). ...

jquerycss

react-admin with custom styling

Is there a way to utilize react-admin without relying on material UI? I am looking to implement react-admin with an alternative design library such as Bootstrap. ...

reactjsmaterial-uireact-admin

The reCAPTCHA feature in Next.js form is returning an undefined window error, possibly due to an issue with

Trying to incorporate reCAPTCHA using react-hook-form along with react-hook-recaptcha is posing some challenges as an error related to 'window' being undefined keeps popping up: ReferenceError: window is not defined > 33 | const { recaptchaL ...

reactjstypescriptreact-hooksnext.jsreact-hook-form

Optimizing CSS usage within Django: top recommendations

Throughout a 6-month-long project, I have continuously added new URLs. However, I am now encountering an issue when using the extend 'base.html' function on other pages where the CSS overlaps and creates confusion. My question is: What are the b ...

javascriptpythonhtmlcssdjango