What is the best way to remove the extra space around a Material UI checkbox?

https://i.sstatic.net/PbWJf.png

The issue at hand is clear. Even when the user clicks outside of the checkbox, it will still alter the box value.

The objective is to eliminate that gap.

            <FormControlLabel
              style={{ height: "25px" }}
              control={<Checkbox size="small" style={{ width: "20px" }} />}
              label={
                <Box component="div" fontSize={10}>
                  label
                </Box>
              }
            />

It should be noted that the width: "20px" does not have any impact.

htmlcssreactjsmaterial-uifrontend

Answer №1

To remove the default padding on a Checkbox, you can apply a custom style like this:

<Checkbox size="small" style={{ width: "20px", padding:0 }} />

Alternatively, it's recommended to use material-ui's makeStyles API and assign a className for better styling control. Check out the makeStyles API here

Here is an example using makeStyles:

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Checkbox from '@material-ui/core/Checkbox'

const useStyles = makeStyles({
  root: {
    width: 20,
    padding: 0,
  },
})

const CustomizedCheckbox = () => {
  const classes = useStyles()

  return (
      <Checkbox className={classes.root}/>
  )
}

export default CustomizedCheckbox

Answer №2

When working with MUI 5, the sx props can be utilized.

<Checkbox
    sx={{pl: 0}}
    // other props
/>

The key pl corresponds to the CSS property padding-left, while pr represents padding-right and so forth.

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

Adjust the size of the image to perfectly fit within the div without enlarging it

I have a variety of images with different dimensions, ranging from 50x100 to 4000x4000 pixels. My objective is to display these images in their original size or scale them down to fit within the browser window. However, I have encountered an issue where t ...

javascriptjqueryhtmlcss

Tips for incorporating a card game into an HTML platform

Seeking guidance on creating a card-based game inspired by Game of Thrones, similar to yu-gi-oh. While experienced in Java, C, C++, I am new to HTML and its libraries. Any advice on which libraries or methods to utilize would be greatly appreciated. I aim ...

html

Tips for centrally zooming responsive images without altering their dimensions

I have created a custom jQuery and CSS function that allows an image to zoom in and out on mouseover while maintaining a constant box size. I modified an example code to suit my needs. Check out the demo here: https://jsfiddle.net/2fken8Lg/1/ Here is the ...

javascriptjqueryhtmlcssimage

Keeping the scroll in place on a Bootstrap4 modal while scrolling through content that is already at the top

On my Bootstrap 4 modal, I have encountered an issue with scrollable content. When I am at the top of the content and try to scroll downwards, nothing happens because I am already at the top. However, if I continue to hold the touch without releasing it, t ...

javascripthtmlcssbootstrap-4bootstrap-modal

Showcase two featured WooCommerce categories on the homepage

On my main page, I am looking to display two categories, mobile and laptop, simultaneously. However, the code I'm using only shows one of the categories. Any assistance would be appreciated. Thank you! <?php $products= new WP_Query( array( ...

phphtmlwordpresswoocommercee-commerce

Enhance the user experience with a personalized video player interface

I am facing difficulty in creating a responsive video with custom controls. While I understand that using a <figure></figure> element and setting the width to 100% makes the video responsive, I am struggling with making the progress bar also r ...

javascriptcsshtmlvideo

Concealing and revealing an element using the CSS property visibility:hidden/visible

There are two div-boxes that should show/hide when clicking on another two div-boxes. I want the divs to maintain their space so as not to disrupt the DOM, ruling out the use of .toggle(). I attempted this approach without success: $('#red, #pink&ap ...

javascriptjquerycss

Adhesive Bottom Navigation, Top Banner, and Full-Height Page Content

Trying to create a header, sticky footer, and content section with 100% height, but facing issues with the middle height. Below is the code and jsfiddles provided. Using HTML 4.0 strict in IE7 without the option to change. jsfiddle without 100% height: ht ...

csshtmlheightstrict

What is the best method for submitting an array of objects using Axios, Formik, and React.js?

Hello, I am facing an issue with posting an array of objects using axios and Formik while also utilizing npm react-select. Here is my initial data: const [initialValues, setInitialValues] = useState( { nom: "",drugs: [{}] ...

javascriptreactjsaxiosformik

Python web scraping: extracting data from li and span elements

My current HTML document structure is as follows: I have a BeautifulSoup object called page_soup, and I am attempting to extract data from a list element. The elements within the list look something like this: <ul class> <li> <a href="h ...

pythonhtmlweb-scrapingbeautifulsoup

In NextJS with SASS modules, the selector ":root" is considered impure since pure selectors are required to include at least one local class or id within them

Lately, I made the switch to using modules in my next.js project. However, I keep encountering an error in my newly created .module.scss files that says: "Selector ":root" is not pure (pure selectors must contain at least one local class or id)". It seems ...

csssassnext.jscss-modulesreact-css-modules

After integrating React-Bootstrap, the npm start command fails to function

Encountering an issue with React js. After installing Bootstrap using npm, the project failed to run in the browser with the npm start command. I was following the React-Bootstrap documentation at Below is the error that is being generated: sh: react-sc ...

twitter-bootstrapreactjsnpm

styling not affecting SVGIcon component in MaterialUI React

I am experiencing an issue with applying a style to the ActionSearch icon. Despite my efforts, the style does not seem to be applied as expected. Although the Paper component receives styles without any problems, the icon component seems to be resistant t ...

reactjsmaterial-ui

React and Redux do not display product information in the user interface

I'm currently in the process of developing a webpage that will display specific product details using React and Redux. However, I seem to be encountering an error where the page just keeps loading without displaying any information. This is how it loo ...

reactjsreduxreact-reduxmern

Filling Dropdown Options with Data from PostgreSQL

I've been attempting to create a dropdown list for an HTML form that is populated from a PostgreSQL table column. However, being new to this, I haven't been able to get it to work successfully. I have some code that I've been studying and tr ...

phphtmlpostgresql

Expanding and collapsing accordion using jQuery to handle dynamic data

I am trying to implement functionality where I have dynamic data and when I click on a button, an accordion opens and closes. The challenge is that only one accordion should be open at a time, closing any previously opened accordions. Currently, my scrip ...

javascripthtmljqueryeventsbootstrap-accordion

The state is seemingly passed to a non-stateful component in React

It seems like I am unintentionally changing the state of a "child" component in React. I thought I was only passing props down, but upon inspection using the React Dev Tools console, I noticed that the initial state of the parent was correctly passed as pr ...

reactjs

Following the incorporation of bootstrap into the website, the column divisions mysteriously vanished

After completing the coding for my website, I had to integrate Bootstrap. However, upon adding the grid to the respective spans, the columns mysteriously disappeared. Any help in identifying what went wrong would be highly appreciated. <div class=" ...

htmlcssbootstrap-4

Provide solely the specified content range

While working with Node.js, my goal is to develop a video server that can serve a specific portion of a larger media file. Thanks to this gist, I have successfully created a video server and integrated it with an HTML5 video player using: <video contr ...

javascripthtmlnode.jsvideoheader

What are the steps to integrating Numeral.js or other JavaScript plugins into a React-Native application?

How can I convert a number to currency format in React-Native? The code snippet I've tried is not working as expected: import Numeral from "numeral"; Numeral(100).format("$0.00") Instead of getting the desired output, I encountered an error message ...

reactjsreact-nativenumeral.js