How to target a nested class in a different sheet with JSS?

Question

I'm not actually sure if i am using the proper terminology. Basically i would like to have a file with a component such as:

//Foo.tsx
const useStyles = createUseStyles({
  foo:{
    background:'red'
  }
})

const Foo = ()=>{
  const classes = useStyles()
  return <div className={classes.foo}/>
}

I would like to override the .foo selector, but none of the syntax worked for me:

// Bar.tsx
const useStyles = createUseStyles({
  bar:{
    '& $foo':{ //<-- what should i use here, if there is anything that would work at all?
      background:'blue!important'
    }
  }
})
const Bar = ()=>{
  const classes = useStyles()
  return (
    <div className={classes.bar}>
      <Foo/>
    </div>
  )
}

Answer 1

As per documentation given here you can try something as following :

const useStyles = createUseStyles({
  bar:{
    '& .foo':{ //<-- what should i use here, if there is anything that would work at all?
      background:'blue!important'
    }
  }
})

I don't know it will work or not but you can try dot(.) instead of dollar($)