CODEWITHSUNDEEP
cssreactjsmaterial-uimaterial-designreact-with-styles
Jacob
Jacob

Reputation: 105

MaterialUI withStyles, trying drilling down to a disabled switches css override

I'm developing with react and MaterialUI on the front end and I have a bunch of customized inputs. Everything is working pretty well except for this one. No matter what combination of selectors I use I can't seem to point to the right one to change this black color.

Also, it'd be nice to have a clear way to identify just by looking at the element selector, to drill down into the right component. Is there anyway to do this (teach a man to fish kind of thing).Here is the image of the element when I inspect it and the color I'm trying to get at.

here is the style object:

        toggleToUse = {
            switchBase: {},
            thumb: {
                color: colorUsedByInputs,
                opacity: 0.6,
                marginLeft: '10.2px'
            },
            track: {
                background: 'grey',
                opacity: '1 !important',
                borderRadius: 20,
                position: 'relative',
                '&:before, &:after': {
                    display: 'inline-block',
                    position: 'absolute',
                    top: '50%',
                    width: '50%',
                    transform: 'translateY(-50%)',
                    color: '#fff',
                    textAlign: 'center'
                }
            },
            checked: {
                '&$switchBase': {
                    color: '#185a9d',
                    transform: 'translateX(32px)',
                    '&:hover': {
                        backgroundColor: 'rgba(24,90,257,0.08)'
                    }
                },
                '& $thumb': {
                    backgroundColor: '#fff'
                },
                '& + $track': {
                    background: 'linear-gradient(to right, rgba(43, 56, 97, 0.7), #2b3861)',
                    '&:before': {
                        opacity: 1
                    },
                    '&:after': {
                        opacity: 0
                    }
                }
            }
        };

Here is the image of the element when I inspect it and the color I'm trying to get at.

Upvotes: 0

Views: 310

Answers (1)

hotpink
hotpink

Reputation: 3226

<Switch classes={{ track: classes.track }} />

  track: {
    '.Mui-disabled + &&': {
      backgroundColor: 'hotpink',
    },
  },

This will work for a default MUI Switch. If needed, you can increase the specificity by adding additional & to the selector. If all fails, please provide a codesandbox and precisely state what color you want in which scenario.

Upvotes: 1

Related Questions