How does this CSS converts into JSS?

Question

I'm trying to get a specific class to change styles when its parent class gets hovered, in CSS it'd be this:

.App:hover customButton {
  background: black;
}

I've tried doing this in JSS but with no success:

export const appStyles = createUseStyles({
  app: {
    width: '90vw',
    height: '90vh',
    margin: '0 auto',
    background: 'blue',
    fontFamily: 'Gill Sans',
    '&:hover': {
      customStyles: {
        background: 'black'
      }
    }
  },
  customStyles: {
    background: 'white';
  }
});

score 1 · Accepted Answer · answered Aug 06 '21 at 18:05

Ensure you're using the nested plugin then use $ to reference another local rule:

export const appStyles = createUseStyles({
  app: {
    width: '90vw',
    height: '90vh',
    margin: '0 auto',
    background: 'blue',
    fontFamily: 'Gill Sans',
    // ------v  Note the "$" here
    '&:hover $customStyles': {
      background: 'black'
    }
  },
  customStyles: {
    background: 'white';
  }
});

How does this CSS converts into JSS?

1 Answers1