0

I'm trying to create a toggle switch by following this example in my React project. I'm using react-jss to help with the styling. I ran into an issue where the content style property with empty '' is not rendered on the page. This essentially creates the circle for the switch. I'm not sure what needs to be done here.

The style in question

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

In the stylesheet I'm setting it up like so

  slider : {
    '&:before' : {
        position: 'absolute',
        content: '',
        height: '26px',
        width: '26px',
        top: '4px',
        left: '4px',
        bottom: '4px',
        borderRadius : '50%',
        backgroundColor : 'white',
        '-webkit-transition': '0.4s',
        transition: '0.4s'
    }
 }
Zephyr
  • 1,612
  • 2
  • 13
  • 37
  • I think this style not complete, you must add these in slider too: position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; and your issue will resolve... – Anees Hikmat Abu Hmiad May 11 '21 at 13:24
  • 1
    See [this thread](https://stackoverflow.com/questions/53768260/css-pseudo-selectors-with-material-ui) which is concerning material-ui but uses JSS under the hood. You need to double quote your `content` property like: `content: "''"`. – lawrence-witt May 11 '21 at 13:25
  • Good point from lawrence-witt too – Anees Hikmat Abu Hmiad May 11 '21 at 13:26
  • @lawrence-witt Thanks! The double quotes helped. – Zephyr May 11 '21 at 13:30

0 Answers0