Render time styles overrides over props

[kof]

Based on the conversation in #6130 to a achieve an ethereal level of override possibilities, we need a way to override any css rule over the props. Its different from overrides and variants in the theme, because those need to be defined in advance and are considered as a predefined standard cases.

This issue is about an override target on just one specific element for the case it needs to be very unique and you don't want/can't predefine its styles in advance.

Example

  const theme = {
    root: X,
    label: Y
  }
  <Button theme={theme}>My Special button</Button>

Now what is X and Y? As of right now, we can't render dynamic styles efficiently, so right now we can go for just a classes map:

  const theme = {
    root: 'your-root-override-class',
    label: 'your-label-override-class'
  }
  <Button theme={theme}>My Special button</Button>

Another option would be available once dynamic sheets lands in JSS, so you can pass styles objects, like the theme:

  const theme = {
    root: {
      borderRadius: 0
    },
    label: {
      color: 'red'
    }
  }
  <Button theme={theme}>My Special button</Button>

And finally we still have inline styles option, which is of course not to recommend, but yet available, it could look basically the same like the previous example, just attached to the node using style instead of className.

[oliviertassinari]

I have given more thought on that issue, I'm having a hard time finding a situation where we might need it. We can achieve something very similar with the classes property. I believe that the classes solution offers more flexibility.
I'm removing it from the v1.0.0-beta milestone. I'm even tempted to close it.

[oliviertassinari]

Now what is X and Y? As of right now, we can't render dynamic styles efficiently, so right now we can go for just a classes map:

I have missed that part, that's the solution we have picked up. So we are good to close 😄 .