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

Issue with displaying jQuery 3.5.1 mobile CSS formatting on live server preview using Visual Studio Code

Despite my best efforts, I can't seem to make the jQuery CSS stylesheet work properly. I've been using the live preview extension in VSCode and got the CSS directly from the jQuery website. <!DOCTYPE html> <html> <head> < ...

htmljquerycssvisual-studio-code

Disabling the scrollTop() effect following a click event with onClick()

Utilizing the scrollTop() event to toggle the visibility of a div at a specific position and also using the onClick() event to permanently hide the div. While the events are functioning properly, an issue arises when scrolling the page causing the div to r ...

javascriptjqueryhtmlcss

Having trouble bringing in icons from the @mui/icons-material library

An error occurs when attempting to run the code. wait - compiling... error - ../../../../../node_modules/@mui/icons-material/esm/utils/createSvgIcon.js:1:0 Module not found: Can't resolve '@mui/material/utils' null Note: @mui/material pack ...

javascriptcssreactjsmaterial-uinext.js

Achieving Full Width Coverage for a div with 100% Width Using the Meta Viewport Tag "width=device-width"

Currently, I am working on optimizing my website to adjust for mobile browsers. In order to achieve this, I have two CSS files - one that is always included and another with media="screen and (max-width:500px)" To ensure proper functionality, I am utili ...

htmlcssviewportmeta

Guide to triggering React Material-UI modal and filling it with data from an Ajax request when a button is clicked

Despite my efforts to find a similar question, I couldn't come across one. My apologies if I overlooked it. Currently, I am working on a React Material-UI project to develop a basic web application. Within this application, there is an XGrid that disp ...

javascriptreactjsmaterial-ui

Integrate child component properties within the parent component

Looking to create a wrapper component that selects specific props from an inner component and includes additional custom props. The issue is that using pick will generate a type rather than an interface, limiting the ability to add more keys. How can I wor ...

reactjstypescript

Guide to Setting the Color of a Link Using CSS

I’ve been attempting to change the color of an ALink using CSS, but it seems like I just can’t get it right. It’s clear that I’m missing something, as I’ve spent quite a bit of time tinkering with this seemingly simple issue and still can’t fi ...

htmlcss

Is there a way to export a variable that has been declared within a function component in React Js?

I am currently developing a React app and I need to export the RoomPricelist1 & FacilityPricelist1 variables. I have assigned values to these variables within a function component but when I try to import them into another function component, they are sh ...

javascriptreactjs

Intellisense from @reduxjs/toolkit is not showing up in my VS Code editor

My experience with vscode is that intellisense does not recognize @reduxjs/toolkit, even though the code itself is functioning correctly. I have already installed the ES7+ React/Redux/React-Native snippets extension from here. Here are a couple of issues ...

reactjstypescriptvisual-studio-codeautocompleteintellisense

Is it possible to implement -webkit-autofill with MUI on React?

After reading about the -webkit-autofill editing background on 'https://stackoverflow.com/questions/57210325/material-ui-change-autofill-background-color-in-textfield', I attempted to implement it in my application but am unsure of where to add t ...

reactjsmaterial-ui

How to dynamically change the color of an AngularJS element based on a condition?

As someone who is new to AngularJS, I am currently working on changing the color of a table element to yellow if the user has voted on a specific choice. <div ng-show="poll.userVoted"> <table class="result-table"> <t ...

cssangularjsconditional-statements

Is there a way to ensure that the 'pointermove' event continues to trigger even after the dialog element has been closed?

I am working on a project that involves allowing users to drag elements from a modal dialog and drop them onto the page. I have implemented a feature where dialog.close() is called once the user starts dragging. This functionality works perfectly on deskto ...

javascripthtmlcss

Issue: setAllcategories function not found

Currently engaged in using Next.js and Sanity as a Headless CMS for the backend. In the code snippet below, I have created a Categories.js file in the components folder to fetch some data. My objective is to extract all the titles from the category Array. ...

javascriptreactjsnext.jssanity

Text Alignment in a Responsive Design

Is there a way to create a responsive container that automatically centers all items inside it on the page, regardless of the screen size? Thanks :) Images are not included in this code snippet, but here's the code: HTML <!DOCTYPE html> <h ...

htmlcss

Position the image to the right of the dropdown menu in Bootstrap

While working with Bootstrap to create a top navbar on my webpage, I encountered some issues: Once the navbar dropdown is opened, I need to display an option list alongside an image positioned to the right of the list. The image should be the same height ...

htmlcsstwitter-bootstrap

Error: The API is unable to retrieve data on dynamically generated pages in a NEXT

My Next.js dynamic page is not fetching data from any API I've been facing an issue with my dynamically generated Next.js page that should retrieve data from an API, but it doesn't seem to be working. Even though I have written the code to fetch ...

reactjsnext.jsroutes

Error: Unable to access data from an unidentified source (reading '0') in open ai

` this is the embedding.ts file import { OpenAIApi, Configuration } from "openai-edge" const config = new Configuration({ apiKey: process.env.OPENAI_API_KEY, }); const openai = new OpenAIApi(config); export async function getEmbeddings(t ...

reactjsnext.jsopenai-apiembeddingpinecone

Encountering a problem while attempting to run the command npx create-react-app myapp

I encountered an issue when attempting to run npx create-react-app my-app. Below are the details, E:\>npx create-react-app myapp npm ERR! code ENOTFOUND npm ERR! errno ENOTFOUND npm ERR! network request to http://registry.npmjs.org/create-react-app ...

node.jsreactjsnpm

Encountering a React Runtime issue: The element type is invalid, expecting a string for built-in components or a class/function for composite components

Here is a glimpse of my code: import { React, useState, useEffect } from 'react'; import { GoogleMapReact } from 'google-map-react'; import styles from './Location.module.scss'; import pinstyles from './TheMap.module.scss ...

javascriptreactjsgoogle-maps-api-3runtime

Ensure Focus Retention Upon Clicking Inside Iframe with li a:focus

How can I prevent my ul.SideNav_Main li a:focus class from losing focus when I click on the iframe or elsewhere on the page? Shouldn't it maintain focus until I click on another URL in the list? Is it possible to solve this issue with just CSS, or wo ...

javascripthtmlcss