Customize hover effects for MuiCheckbox

For some reason, my checkboxes are displaying a circle on hover that I want to remove.

https://i.sstatic.net/62TLL.png

I attempted to make overrides in MuiTheme:

export const MUI_THEME = createMuiTheme({
  overrides: {
    MuiCheckbox: {
      root: {
        '&:hover': {
          backgroundColor: 'transparent'
        }
      }
    },
  },

However, the styles it produces are being ignored in regular browsers.

@media (hover: none) {
  .MuiCheckbox-colorSecondary.Mui-checked:hover {
    background-color: transparent;
  }
}

Is there a way to create overrides without using @media (hover: none)? The only solution I can think of is to use a css style with !important, but I believe there should be a way within the createMuiTheme function.

cssreactjsmaterial-ui

Answer №1

To overcome that specificity hurdle, I implement a technique of chaining CSS classes like .class.class{...}, even if it means using the same class name.

export const CUSTOM_THEME = createMuiTheme({
  overrides: {
    MuiCheckbox: {
      root: {
        '&$root$root:hover': {
          backgroundColor: 'transparent'
        }
      }
    },
  },

Answer №2

To achieve the neatest result without altering the theme settings, simply customize the style using the custom prop.

sx={{
      '&:hover': { background: 'lightgray' },
    }}

Answer №3

After researching on material ui documentation, I came across this interesting piece of code:

const useStyles = makeStyles({
  root: {
    "&:hover": {
      backgroundColor: "transparent" <-- Keep an eye on this line
    }
  },
  icon: {
    borderRadius: 3,
    width: 16,
    height: 16,
    boxShadow:
      "inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)",
    backgroundColor: "#f5f8fa",
    backgroundImage:
      "linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))",
    "$root.Mui-focusVisible &": {
      outline: "2px auto rgba(19,124,189,.6)",
      outlineOffset: 2
    },
    "input:hover ~ &": {
      backgroundColor: "#ebf1f5"
    },
    "input:disabled ~ &": {
      boxShadow: "none",
      background: "rgba(206,217,224,.5)"
    }
  },
  checkedIcon: {
    backgroundColor: "#137cbd",
    backgroundImage:
      "linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))",
    "&:before": {
      display: "block",
      width: 16,
      height: 16,
      backgroundImage:
        "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
        " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
        "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
      content: '""'
    },
    "input:hover ~ &": {
      backgroundColor: "#106ba3"
    }
  }
});

Incorporating it into JSX:

<Checkbox
      className={classes.root}
      disableRipple
      color="default"
      checkedIcon={<span className={clsx(classes.icon, classes.checkedIcon)} />}
      icon={<span className={classes.icon} />}
      inputProps={{ "aria-label": "decorative checkbox" }}
      {...props}
    />

Explore the demonstration here: https://codesandbox.io/s/material-demo-forked-cxztq?file=/demo.js:1628-1921

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

Customizing an external module class using CSS module pattern in React

Is there a way to locally override an external module's CSS class for a specific component? Here is my current code: import `style` from './style.module.css' // local CSS module import `ExternalComponent` from 'ExternalComponent&apos ...

cssreactjscss-modulesreact-css-modulesbabel-plugin-react-css-modules

Instability detected in the image when hovering over and off

Here is a snippet of code from my HTML file: <img id="id1" src="photo1" usemap="#ir" > <img src="photo2" id="id2"/> <span> <map name="ir" id="ir"> <area alt="" title="my title" href="my link" shape="poly" coords="13,15,29 ...

jqueryhtmlcss

The suspense option is being used incorrectly in the next/dynamic function

My goal is to have a loader component displayed while my page is rendering. After reading the documentation on dynamic imports, I implemented the following code: const DynamicLazyComponent = dynamic(() => import('../components/loader'), { ...

reactjsnext.jsreact-suspense

How can you use HTML, CSS, and JavaScript to group objects with one color and then change the color of one specific object?

I have a set of 6 labels that act as buttons. When one is clicked, it changes from white to blue. If another label is clicked, the previously blue label turns white and the newly clicked one turns blue. Currently, the code below sets all labels to white b ...

javascripthtmlcss

Enhancing the styling of checkboxes using CSS and Javascript

My Javascript skills have been put to the test with a simple code snippet that customizes checkboxes by hiding them and using background images in CSS to display checks and unchecks. It's a neat trick, but I'm wondering if it's HTML/CSS comp ...

htmlcsscheckboxaccessibility

Error during the production build of Next.js Internationalized Routing: Prerendering page encountered an unexpected issue

The configuration in my next.config.js file looks like this: module.exports = withBundleAnalyzer({ i18n: { locales: ['en', 'es'], defaultLocale: 'en', localeDetection: false, }, ... }); This setup allows for ...

javascriptreactjsnpmnext.js

Steps to retain localStorage data while redirecting to another external webpage

Encountering an issue with saving localStorage data across redirects. See the code snippet below: // Invoke newSitelogin(). Save response(credentials) in localStorage. Redirect to new URL. newSitelogin({ uuid, password }) .then(() => { window.ope ...

javascriptreactjsgoogle-chromelocal-storageredux-saga

Why isn't the CSS outline property functioning properly within the handlebars?

I am working on a login form within a Handlebars page and I am trying to figure out how to set the default outline property to none for that particular element. Does anyone know how to do this? Snippet of code from the Handlebars file <input type=" ...

csshandlebars.js

Transforming a React class component into a functional component and incorporating an action creator within the useEffect hook

Currently, I am in the process of refactoring a class component into a functional component. One particular issue I am facing is whether to use an action creator inside useEffect() instead of componentDidMount(). My linter is flagging that I'm not pas ...

reactjsreduxreact-redux

Encountering a Hydration error when attempting to utilize react-player

How are you doing today? I've been attempting to integrate react-player into my Next.js application without success. The snippet of code looks like this: import ReactPlayer from "react-player"; const Home = () => { return ( <div> ...

reactjsnext.jsreact-playerhydration

Exploring Angular Material Design's method for vertically populating a column

Is there a way to fill a column vertically in my current app? https://i.sstatic.net/uu4yO.png I've been struggling for hours trying to make the vertical items span the entire height of the page. I have pored over documentation and other posts, but I ...

cssangularjsmaterial-designangular-material

The menu bar becomes distorted when the page is zoomed out

Hey everyone, I could really use some assistance with my menus. Whenever I zoom out of the page, they become distorted. Here is the link to my website: https://dl.dropbox.com/u/22813136/Finding%20Nemo%20Inc/FNemo_front.htm# I tested the link on Internet E ...

htmlcss

I will see the "undefined" entity displayed in the bar chart created using react-chartjs

Using the react-chartjs-2 library, I created a bar chart with the following data: const chartData = { labels: ['Dealer1', 'Dealer2', 'Dealer3', 'Dealer4', 'Dealer5', 'Deal ...

javascriptreactjsspring-bootreact-chartjs-2

Dynamic styling updates on page refresh in Next.js

There is a strange issue with my styling that I can't seem to figure out. I have a NavBar set to be 20vh in height and an image set to be 100% in width. However, whenever I refresh the page, the NavBar height decreases and the image width increases si ...

javascriptcssreactjsmaterial-uinext.js

Fade one element on top of another using Framer Motion

Looking to smoothly transition between fading out one div and fading in another using Framer Motion, but facing issues with immediate rendering causing objects to jump around. Example code snippet: const [short, setShort] = useState(false); return ( ...

javascriptcssreactjsanimationframer-motion

Alignment of containers on the same level in a horizontal direction

Looking to achieve horizontal alignment of div containers. The container on the left (with a blue border) may have a fixed height. The other two containers (with red borders) should be aligned horizontally to the left blue container regardless of its heigh ...

htmlcsstwitter-bootstrapflexbox

Expanding Beyond Boundaries: Utilizing CSS to Overflow From a Div and Fill the Entire Screen

I have a main DIV that acts as part of my responsive layout grid. It grows to the maximum width I've set, which is 1280px, and then adds margins for larger devices. Below you'll find my CSS along with a snippet of Less code. .container { mar ...

css

Design interactive elements such as buttons and input fields inspired by the layout of Google websites

Does anyone know how to achieve the sleek, lightweight buttons and text boxes seen on Google's web pages like Google Search, Google Plus, and Google Play? I am currently using JSP and CSS, but I am open to incorporating jQuery if necessary. Any help w ...

jquerycssjsp

Troubleshooting: Header Appears Slightly Below the Top of the Screen in CSS/HTML

Despite setting padding: 0; and margin: 0;, the div always appears below the top of the browser, without touching it. Below is the snippet of code: html, body { margin: 0; padding: 0; } .nav>ul>li { display: inline-block; padding: 0px 25 ...

htmlcss

Tips for changing color when hovering over elements in a CSS grid

I am currently attempting to incorporate a hover effect into this CSS grid, but I have not been successful in my efforts. I experimented with transition and opacity techniques, but they did not work as expected. Can someone please point out what I may be ...

csshovercss-grid