[Rating] Add TODO comment in Rating component to use readOnly state class

[ZeeshanTamboli]

• I have followed (at least) the PR section of the contributing guide.

With the advent of readOnly global state class in #32822, we also need to add it in the list of state classes that is used to trigger the CSS specificity warning when overriding in theme. We missed it in #32822.

I refactored it to keep it defined in one place only. Otherwise, this would be easy to miss in future.

[mui-bot]

Netlify deploy preview

https://deploy-preview-36357--material-ui.netlify.app/

Bundle size report

No bundle size changes

Generated by 🚫 dangerJS against f6794c0

[mnajdova]

The changes makes sense, however in this moment the Rating component does not increases the specificity for the readOnly state. We could introduce this breaking changes in the next major release. The error currently is kind of not reflecting the correct state of things, which may be confusing. Let's add in https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Rating/Rating.js#L106 comment for using the state class in v6.

[ZeeshanTamboli]

The changes makes sense, however in this moment the Rating component does not increases the specificity for the readOnly state. We could introduce this breaking changes in the next major release. The error currently is kind of not reflecting the correct state of things, which may be confusing. Let's add in https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Rating/Rating.js#L106 comment for using the state class in v6.

Oh okay. I didn't notice that the Rating component uses ownerState instead. I reverted the previous changes and added the comment. I reverted because it may unnecessarily throw an error even if it works without a need to increase specificity in the theme.

I wonder whether it is better to use ownerState in future to apply conditional styles internally in our components?

[mnajdova]

I wonder whether it is better to use ownerState in future to apply conditional styles internally in our components?

This is always the recommended approach, except for the state classes, so that we are closer to the CSS pseudo selectors. For e.g. in plain CSS you would have: .some-classname:disabled, which in our world, maps to: .some-classname.Mui-disabled.