Material-ui: [styles] withStyles - makeStyles - Can't use props (function) in nested styles

[tulodzieckim]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Whenever I try to use function as backgroundColor: props => props.color for nested styles in makeStyles or withStyles the style does not work.

Expected Behavior 🤔

It should be possible to use props (function approach) in makeStyles, withStyles for nested styles.

Steps to Reproduce 🕹

Go to: https://codesandbox.io/s/cant-use-props-in-nested-style-pz885

Steps:

1. Try to change backgroundColor of track using function (line 20, demo.js)

Context 🔦

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.9.8 |
| React | v16.13.1 |

[cristian-eriomenco]

Can confirm same issue.

Was able to understand which part enables this feature.
As per JSS its this plugin: jss-plugin-rule-value-function

Which indeed is used as per the preset: https://github.com/mui-org/material-ui/blob/v4.9.9/packages/material-ui-styles/src/jssPreset/jssPreset.js

There is a closed issue already in the JSS Repo
If you play with the sandbox at the bottom of the issue it looks like its not a JSS issue after all.

Observation:
Interestingly if you replace your aliased class aka "& + $track" with the actual class material-ui will replace as "& + .MuiSwitch-track" it still doesn't work for the arrow function variant.

@oliviertassinari Any ideas?

[mimshins]

Any progress on this issue?

[inakiarroyo]

Having the same issue trying to use $ruleName to reference a local rule within the same style sheet. Styles aren't applied if props (function approach) is used.

| Tech | Version |
| :---| :--- |
| @material-ui | v4.11.0 |
| jss | v10.4.0 |
| react | v16.13.1 |

[oliviertassinari]

An update, this issue is being resolved in v5 thanks to #22342 and the new @material-ui/styled-engine package. The $ruleName API is no longer available on the styled-components API. Instead, developers can leverage the global class names, which is a step closer to relying on CSS and removes the need to learn a new syntax. This one has caused a lot of friction for new comers.