Adjust SVG Checkbox to eliminate any unnecessary padding

I am attempting to customize the MUI5 checkbox CSS fields, and here is the current status:

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

These are my CSS classes:

 MuiCheckbox: {
  styleOverrides: {
    root: {
      ".MuiSvgIcon-root": {
        backgroundColor: "white",
      },
    },
  },
},

Here is the structure:

 <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-7w1q46-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="CheckBoxIcon">
 <path id="kk" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
 </svg>

My query is how can I remove the white border without removing the background color? (as removing the background color makes the inner check transparent)

htmlcsssvgmaterial-ui

Answer №1

I encountered a challenge with the viewBox values that couldn't be overridden, but I managed to find a straightforward solution

Here is my revised CSS override:

 MuiCheckbox: {
  styleOverrides: {
    root: {
      ".MuiSvgIcon-root": {
        backgroundColor: "white",
        path: {
          transform: "translate(-2px, -2px) scale(1.2)",
        },
      },
    },
  },
},

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

Companimation Woes: CSS3 Animations Not Triggering Unless Loaded

I am currently utilizing Mike Fowler's companimation library for Compass, but unfortunately, I am encountering an issue where my animations are not functioning properly in Firefox (even though they work perfectly in Chrome). The problem arises when el ...

jquerycssfirefoxanimation

Chrome Experiencing Issues with Nested Divs

Having an issue with nested divs in Chrome <div id="wrapper"> <div id="content"> </div> </div> The wrapper div acts as a bordered container, forming a box. In Safari and Firefox, the content sits inside this box consistentl ...

htmlcssgoogle-chrome

Comparing the use of jQuery click event with the button to trigger a function that calculates the

Currently, I am grappling with a JQuery function that checks if any checkboxes are ticked within my form. My version of JQuery is v1.10.2. The code functions as expected when triggered by a button, but when I attempt to trigger it with a checkbox within t ...

javascriptjqueryhtmlformscheckbox

When you add the measurements of two images to the top bar, you get the viewport size

Requirement 1: A top bar measuring 46px in height Reqirement 2: One photo positioned at the top and another at the bottom I have attempted the techniques mentioned on How to resize an image to fit in the browser window?. However, the images still appear ...

htmlcss

What is the best way to transfer the variant property of the material-ui TextField when using a higher-level React component?

I'm encountering difficulties with typing... Essentially, I have a wrapper React component for the @material-ui TextField but I am struggling with getting the typings correct for the variant property. Here's the main problem. Using @material-ui ...

reactjstypescriptmaterial-ui

Adjusting the size of the post title's font

Looking to decrease the font size of the latest post's title and keep it centered on my Jekyll based blog. I attempted to adjust https://github.com/x0v/x0v.github.io/blob/master/_sass/atoms/_feature-title.scss by adding font-size: 45px !important; f ...

cssfrontendjekyllscss-lint

Can an excess of CSS impact the speed and performance of a website?

After conducting thorough research on this specific topic, I was unable to locate the precise answer that I require. For instance, there are numerous divs within my project that necessitate a border. One approach is to create a distinct CSS class such as ...

htmlcss

Replace the single text area with multiple div elements and update the image within each div

Within the 'Pinctitle' area, there is text that I want to change each time a Pselectorbutton is hovered over with a fading effect. Additionally, I would like the image inside the 'Pselectorbutton' to change at the same time. Currently, ...

jqueryhtmlcss

Real-time Email Validation: Instant feedback on email validity, shown at random intervals and does not persist

I am attempting to show the email entered in the email input field in a validation message. The input field also checks my database for registered emails and displays a message based on the outcome. I then included this code from a source. What happens is ...

phpjqueryhtml

Troubleshooting: Ruby on Rails and Bootstrap dropdown issue

Having some issues with implementing the bootstrap dropdown functionality in my Ruby on Rails application's navigation bar. I have made sure to include all necessary JavaScript files. Below is the code snippet: <div class="dropdown-toggle" d ...

javascriptcssruby-on-railsrubytwitter-bootstrap

Looking to generate an HTML table using JavaScript?

Similar Question: Create HTML table from a Javascript array I have received an array that looks like this var univArray = new Array( {name: "Stanford University", nick: "Stanford", ownership: "private", sys: "n/a", SATh: 1550, SATl: 1360, tui ...

javascripthtml

Basic Tallying Code in JavaScript

Hi, I am currently working on creating a basic counter using HTML / CSS and Javascript. Unfortunately, my Javascript code is not functioning correctly, even after trying various solutions found online. I attempted to include "async" but it appears that my ...

javascripthtml

How can I use jQuery to either display or hide the "#" value in a URL?

I have a question that I need help with. Let's say I have the following links: <a href="#test1"> Test </a> <a href="#test2"> Test 2 </a> When I click on Test, the URL will change to something like siteurl/#test1. However, whe ...

javascriptjqueryhtml

Adding spacing breakpoints in Material-UI 5 sx properties

Currently in the process of updating my components to utilize the latest MUI version. I have been converting old classes into the sx props and I find this new styling method to be more readable in my opinion. However, one thing that concerns me is handl ...

cssreactjsmaterial-ui

Is it possible to dynamically assign trigger and target divs to bPopup?

On our ColdFusion page, we have a dynamic list of paired divs created using a loop over a query. For example, each pair consists of internshipHandleX and internshipHiddenX: <div id="internshipHidden#internship.currentrow#" class="hidden pop-up"> We ...

javascriptjquerycsscoldfusionbpopup

Having trouble displaying Material UI components in a React application?

I have encountered an issue where the text content of Material UI components is not being rendered to the final HTML. When looking at the render method of my component, it appears as follows: render() { const panel = this.props.panel; return (< ...

reactjsmaterial-ui

Are the connections from a single array unique?

A generous user shared this code with me: $singles = valley_images(); $groups = valley_group_images(); $images = array_merge($singles, $groups); $sortArray = array(); foreach($images as $image){ foreach($image as $key=>$value){ if(!iss ...

phphtmlmysqlarrays

Troubleshooting HTML/JavaScript with JSP and JSTL: iPhone only displaying the first option in select dropdown, rather than the selected option

My HTML includes a <select> element: <select id="mySelect"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> ...

javascriptjqueryhtmljspjstl

Issue with aligning label to the left in Material UI select component causing unexpected behavior

Is there a way to left align a label for a select component created with Material UI without it going outside the formControl? I'm looking for a solution that keeps the label within the formControl but does not require using labelPlacement or FormCont ...

reactjsmaterial-ui

Troubleshooting on Safari for iOS

As I work on my portfolio website using only HTML 5 without any JavaScript, I encountered an issue with the about page not functioning properly on iPhones. There seems to be a problem with scrolling as some elements are fixed and do not move along with t ...

htmlioscssdebuggingsafari