CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
scrumminAndgoin
scrumminAndgoin

Reputation: 31

React MUI Switch Styling Randomly Changes?

Trying to incorporate a switch component from MUI into my code and for some reason, upon initial page load the switch looks like how it should, identical to the one on the MUI site. On reload however, it changes and looks like this:

Slider Styling

How do I get it to not change into that? This is what my code looks like in that section:

<div
  style={{
    zIndex: 1,
    position: "absolute",
    margin: "25px 0 0 0",
    float: "left",
    left: "22px"
  }}>
  <label>Show Voided Orders:</label>
  <Switch  
  defaultChecked={false} 
  />
  </div>

Upvotes: 1

Views: 412

Answers (1)

yhk2079
yhk2079

Reputation: 11

You can try these methods in the document (https://mui.com/material-ui/customization/how-to-customize/).

example:
https://mui.com/material-ui/react-switch/#customization

CSS class name for reference: https://mui.com/material-ui/api/switch/#css

Upvotes: 1

Related Questions