Modify the appearance of material-ui checkbox

For my project, I am utilizing React along with the styled-component package for styling. However, I am facing an issue when it comes to styling the Material-ui checkbox using styled-component. The problem lies in narrowing the border of the checkbox, as there seems to be no apparent way to adjust the border width through the Material-ui interface.

The current code snippet that I am working with is as follows:

const StyledCheckbox = styled(Checkbox)`
  svg{
    color: #CDCDCD;
    font-size: 30px;
  }
`

I am attempting to style the SVG element of the checkbox component. Unfortunately, I am unsure which props of the SVG element are responsible for controlling the border width. I have experimented with props like font-weight and border-width, but none of them seem to yield the desired result.

You can access the Codesandbox demo here.

Expected Result:

Expected Image

Current Result:

Current Image

cssreactjsfrontendmaterial-uistyled-components

Answer №1

In my opinion, a great approach is to include a new custom icon as a prop called icon in the Checkbox component.

<StyledCheckbox
    checked={checked}
    onChange={onChange}
    color="primary"
    icon={<CustomIcon />}
    {...others}
 />

The <CustomIcon /> can take various forms:

  • A personalized svg with tailored styles.
  • A React/Styled component with specific css properties (such as border, borderRadius, width, and height).

For more details, refer to the documentation: https://material-ui.com/api/checkbox/#props

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

What causes the input field to lose focus in React after typing a character?

Currently utilizing React Mui for components and encountering no errors in either the Chrome inspector or terminal. How can this be resolved? No error notifications are being displayed by eslint or Chrome Inspector. The form submission functions correctl ...

javascriptreactjsmaterial-ui

Session is being established by Express/Passport, however, the cookie is not being transmitted to the

Currently, I have a project running with React on the client side and Node.js on the server side. Client side (React app) - http://localhost:3000 Server side (Node.js) - http:..localhost:5000 My focus at the moment is on implementing user authentication ...

node.jsreactjsexpressmongoosepassport.js

Is there a sweet syntax for CSS variables available?

What about using this instead: :root { --primary-color: gray; --secondary-color: lightgray; } var(--pc) Is there a more concise syntax available, perhaps shorter than var(--pc)? ...

csscss-variables

Using HTML <style> in a bash script is a great way to enhance

I am attempting to eliminate the bullet points from HTML code generated by a bash script. I am currently struggling to apply the style across the entire program. Given my limited knowledge of html, I suspect that I may be misinterpreting or incorrectly p ...

htmlcssbashstylesheet

Error encountered in Liferay's npm-react-portlet: the module has not been defined

Currently, I am in the process of developing a React portlet for Liferay 7.0 CE. To kickstart this project, I utilized the blade command (directly from the Liferay react template). blade create -t npm-react-portlet -p fi.liferay.react.portlet -c ReactMain ...

reactjsnpmliferay

Implementing user-driven filtering in a React table

When a user clicks on the submit button, data will be loaded. If no filter is applied, all data will be displayed. const submit = async (e: SyntheticEvent) => { e.preventDefault(); const param = { ...(certificateNo && ...

javascripthtmlreactjsapireact-hooks

I'm puzzled as to why I'm not receiving the anticipated object output information. What

After learning some React concepts and attempting to practice on my own, I encountered a small challenge. My goal is to store the data from an input field in an object, where the username field corresponds to its value and the password field contains its v ...

reactjs

Changes made to the data are not reflected in the user interface, but they are visible in the console

When working on a React project with input fields, I encountered an issue where the date data can be changed but doesn't get reflected in the UI. Instead, the updated data is visible in the console. The code snippet below showcases how I'm using ...

javascriptreactjsreact-datepicker

Add the word "String" in front of the moment timestamp

In my project, I have used React along with Material UI to show the message Running check... when the clicked state is set to true. If it's not true, then I am displaying a timestamp by utilizing the react-moment library. <Typography gutterBottom ...

javascriptreactjsmaterial-uimomentjs

In the Next.js environment, the utilization of chartjs's cutoutPercentage and tooltips features may not

For my next.js project, I am utilizing the react-chartjs-2 library to generate charts. I have encountered an issue where the cutoutPercentage property in chart.js, which is supposed to make the donut chart thinner, does not seem to work properly in next. ...

reactjsnext.jschart.jsreact-chartjs-2

The Material UI Select Component has the ability to transform a controlled text input into an uncontrolled one

I encountered a warning in the console while trying to update the value of a Select input. The warning message is as follows: index.js:1446 Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not swi ...

javascriptreactjsmaterial-ui

How to Add Catchy Titles to Your Menu Items on Silverstripe CMS?

Hey there! I'm currently working with Silverstripe CMS using the "Simple" template. I'm interested in finding out how to add subtitles to my menu items. Here's the current structure of my navigation template: <nav class="primary"> &l ...

phpcsscontent-management-systemsilverstripe

Struggling to use GSAP to control the timeline with my custom functions

I'm attempting to create a greensock animated banner with the ability to switch between different scenes. I've made progress by setting up the timeline for each scene's intro and outro animations using the GreenSock API documentation. Howeve ...

jqueryhtmlcssgsap

Is there a way to retrieve match.params from within a Redux Thunk action?

Is there a way to achieve the functionality shown below, without manually passing data into the function from a component? function doSomething() return (dispatch, getState) => { console.log(getState().router.match.params) } } This is i ...

reactjsreact-reduxreact-routerredux-thunkconnected-react-router

I am having difficulty creating grid-template-columns in Vue

When I placed my code in the style scoped section... This is the desired output that I'm aiming for: .user-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 1rem; } .user-car ...

cssvue.jsgridnuxt.js

Preventing the occurrence of empty nested arrays within the state

I am currently working on a React Redux application where I am adding movies and including images as a nested array within my object. Here is what my state looks like after adding an item: { movies: [ { "title": "asda", "director": "as ...

javascriptreactjsreduxreact-redux

What is the best method for testing an npm package that has been delivered as a .tgz file in a React

I have a npm package that is in .tgz file format included in my react application. When I try to test a react component using jest that imports this package, I encounter the following error. Do I need to configure something in jest for testing? Jest e ...

reactjsnpmjestjsjointjsrappid

Providing parameters to a dynamic component within NextJS

I am dynamically importing a map component using Next.js and I need to pass data to it through props. const MapWithNoSSR = dynamic(() => import("../Map"), { ssr: false, loading: () => <p>...</p>, }); Can anyone sugges ...

javascriptreactjsnext.js

Why is my filtering and sorting function failing to function properly?

I have a collection of events represented by an array of objects, where each event contains a start date and an end date. My goal is to filter out any events that have already passed based on the current time (now), and then sort the remaining events in d ...

javascriptsortingreactjsfilterreact-native

Issue with line height using Material-UI grid alignment: Ensure line heights are unitless for proper alignment

Encountering a common error in ReactJs projects: Error: Material-UI: unsupported non-unitless line height with grid alignment. Use unitless line heights instead. A snippet of the code where the error occurs: const breakpoints = createBreakpoints({}); le ...

cssreactjsmaterial-ui