0

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.

Jacob
  • 105
  • 1
  • 10
  • Please add your code (image is not enough). – Or Assayag Jan 08 '21 at 21:43
  • I think its not that easy, specially they have some complex selectors. Best way for me is to find the element I want to change its style with browser inspect, and see what attribute needs to be changed, then apply that style to that selector. You can always read the source code, it might be helpful sometimes. – c0m1t Jan 08 '21 at 21:45
  • Okay I added the style object @OrAssayag – Jacob Jan 08 '21 at 21:48
  • you want to change the track color, right? – Rajiv Jan 09 '21 at 02:44

1 Answers1

1
<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.

hotpink
  • 2,882
  • 1
  • 12
  • 15
  • 1
    This worked beautifully. Thank you so much for the solution and the insight into the selector! – Jacob Jan 10 '21 at 01:27