How to use child selectors in JSS

javascript jss
Jon Sakas picture Jon Sakas · Jun 29, 2018 · Viewed 12.7k times · Source

I'm experimenting with JSS to see if it is realistic to migrate a Sass code base. I have a very basic example of a CSS style that, when hovered, modifies the style of a child node. 

span {
  color: red;
}

button:hover span {
  color: blue;
}

<button>
  <span>Click Me</span>
</button>

I am unsure how to write this in JSS. Something I have tried looks like:

const styles = {
  button: {
    '&:hover': {
      span: {
        color: 'blue',
      }
    }
  },
  span: {
    color: 'red',
  }
}

const { classes } = jss.createStyleSheet(styles).attach()

document.body.innerHTML = `
  <button class=${classes.button}>
    <span class=${classes.span}>Click Here</span>
  </button>
`

Thanks!

Answer

deowk picture deowk · Jun 29, 2018

Have you tried doing: 

const styles = {
  button: {
    '&:hover span': {
       color: 'blue',
    }
  },
  span: {
    color: 'red',
  }
}

Related questions

jss how to change opacity for a color

Currently I am using the following code to add a color to an element using jss. I would like to know if exist a function to add opacity based on colortheme.colors.red. example smt like: backgroundColor: color(theme.colors.…

Read More
idiomatic way to share styles in styled-components?

trying to port some code from jss to styled-components, jss code looks something like: //... const styles = { myStyles: { color: 'green' } } const {classes} = jss.createStyleSheet(styles).attach() export default function(props) { return ( <div> <Widget1 className={classes.myStyles}/> <…

Read More
Cant remove padding-bottom from Card Content in Material UI

When using the Card component from Material UI it seems like the CardContent has a padding-bottom of 24px that i cannot override with the following code. I can set paddingLeft, Right and Top using this method but for some reason …

Read More