How to reference a local rule within the same style sheet JSS

Question

How I can fix it ?

'&:focus':{
    '&:hover':{
        borderColor: colors.electro
        },
    `&~${ classes.error }`:{
        display: 'none'
        },
}

How would I do the equivalent of classes.error?

Answer 1

You simply use $classname since there is no classes object in JSS.

Make sure you have jss-nested. You can find documentation there.

Replace the last section of your code with this:

'& $error':{
    display: 'none'
  },

This is assuming you have another classin your JSS that is called error. It will use the generated name. This allows you to apply classes like so: {classNames(classes.whatever, classes.error)}

If you do not have another class called error in your JSS, then you can remove the dollar symbol. This will mean that when you apply classes to your element, you can use {classNames(classes.whatever, 'error')}

Note, I am using classNames, but you could use string concat.