Reference another stylesheet

[bsShoham]

Is your feature request related to a problem? Please describe.

As a user of React-JSS I would like to override children component styles without specifity hacks. For example I have a Button component that its background color is red , and I have a Button Group component that sets the default background color of all child buttons to yellow, I would like to reference the button to sheet to override it. The current outcome css would be something like

// from createUseStyles at "button.tsx"
{
  small: {},
  primary: {},
  button: {
   "&$primary$small": {
       backgroundColor: "red"
     }
  }
}

turns into

.button-1-0-1.primary-1-2-0.small-1-0-0 {
  background-color: "red"
}

and

// from createUseStyles at "button-group.tsx"
{
  childButton: {}, // given through className to all children buttons
  buttonGroup: {
   "& > $childButton": {
       backgroundColor: "yellow"
     }
  }
}

turns into

.buttonGroup-2-2-1 > .childButton-1-0-2 {
 background-color: "yellow"
}

the specifity of the button sheet is stronger, currently to beat it I would have to do some hacks like that

{
  childButton: {},
  buttonGroup: {
   "& > $childButton$childButton$childButton": {
       backgroundColor: "yellow"
     }
  }
}

Describe the solution you'd like I would like to be able to reference another sheet perhaps by code (importing the other use styles and referencing it in mine), another option is to add another special reference syntax maybe something like

{
  childButton: {},
  buttonGroup: {
   "& > $childButton%buttonSheet$button": {
       backgroundColor: "yellow"
     }
  }
}

Are you willing to implement it? Willing to try, would love maybe some guidance to start