CODEWITHSUNDEEP
reactjsmaterial-ui
Sean Liu
Sean Liu

Reputation: 1763

How to only give MUI Switch border style when it is checked?

Here is the demo link. Right now I give root a border style. However, I want to remove the border style when the switch is checked. How would I do this? Thanks for the help!

import * as React from "react";
import Switch from "@mui/material/Switch";
import { withStyles } from "@material-ui/core/styles";
const label = { inputProps: { "aria-label": "Switch demo" } };

const CustomSwitch = withStyles({
  root: {
    width: "40px",
    height: "20px",
    padding: "0px",
    borderRadius: "10px",
    marginRight: "8px",
    border: "1px solid #606060",
    position: "relative"
  },

  colorSecondary: {
    "&.Mui-checked + .MuiSwitch-track": {
      backgroundColor: "#05756C"
    },
    "&.Mui-checked": {
      color: "white"
    }
  },
  thumb: {
    position: "absolute",
    width: "12px",
    height: "12px"
  },
  track: {
    backgroundColor: "transparent"
  },
  switchBase: {
    color: "#606060",
    "&$checked": {
      // color: 'white!important',
    }
  }
})(Switch);

export default function BasicSwitches() {
  return (
    <div>
      <CustomSwitch {...label} />
    </div>
  );
}

Upvotes: 1

Views: 1010

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81290

Remove the border from the parent (SwitchBase) and put it in the track component inside so it can be targeted by CSS selector when the state of the sibling element changes:

root: {
  ...
  // border: '1px solid #606060', // <-------------------- comment this line
},
track: {
  backgroundColor: 'transparent',
  borderRadius: '10px',
  border: '1px solid #606060',
  height: 'auto',
  opacity: 1,
},
switchBase: {
  color: '#606060',
  '&.Mui-checked + $track': {
    border: 'none',
  },
},

Codesandbox Demo

Since you're using v5, you shouldn't use withStyles anymore, it is deprecated and will be removed in v6. Here is the equivalent demo in v5 using styled instead.

Codesandbox Demo

Upvotes: 2

Related Questions