[docs] Show how to target global state classes with CSS Modules

[RubemMazzetto]

Closes #42941

This Pull Request improves the CSS Modules section of the Interoperability guide by documenting how to target custom pseudo-classes such as .Mui-selected.

Changes

• Adds a example that shows how to combine local CSS module classes with global Material UI state classes.
• Explains how to use the :global selector to scope styles correctly.
• Highlights real-world use with a ListItem that conditionally applies custom styles when selected.

Why

This improvement addresses the issue #42941 by providing a clear and actionable solution.

[mui-bot]

Netlify deploy preview

• docs/data/material/integrations/interoperability/interoperability.md

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 2ae54ec

[ZeeshanTamboli]

@RubemAZ Thanks for the PR.

I think this should be under the "CSS Modules" section in the Interoperability docs: https://mui.com/material-ui/integrations/interoperability/#css-modules.

The "Global CSS" section is for targeting the classnames already provided by the Material UI components whereas the "CSS Modules" is for targeting the custom local classes provided by the user.

So, if we want to target the Material UI classes with local CSS modules classes we need to use the global selector (:global).

Also this section (https://mui.com/material-ui/integrations/interoperability/#deeper-elements-4) already shows using the :global CSS Module selector. It shows doing:

.slider :global .MuiSlider-thumb {
  border-radius: 1px;
}

whereas the following also works:

.slider :global(.MuiSlider-thumb) {
  border-radius: 1px;
}

I think we should modify it to use .slider :global(.MuiSlider-thumb) and also add this new section on targeting .Mui-selected state class and .myListItem local class under this.

[RubemMazzetto]

@ZeeshanTamboli, thank you for review.

Once the adjustments you requested in the Deeper Elements section have been made, I believe there is no need to maintain this new section. What do you think about this? If you would like to continue with this new section, or if you would like to proceed with reviewing and improving the explanation, I am at your disposal.

[ZeeshanTamboli]

@ZeeshanTamboli, thank you for review.

Once the adjustments you requested in the Deeper Elements section have been made, I believe there is no need to maintain this new section. What do you think about this? If you would like to continue with this new section, or if you would like to proceed with reviewing and improving the explanation, I am at your disposal.

Thanks, @RubemAZ. I think we should keep the new list item example section and also update the existing Slider section. We can place the new section right below the updated one.

[RubemMazzetto]

@ZeeshanTamboli, do you think we need to keep the new section under the Deeper Elements, right?

What do you think about rendering the example list, like the sliders rendered in the following documentation (https://mui.com/material-ui/integrations/interoperability/#deeper-elements-4)?
Something like this: (https://mui.com/material-ui/react-list/#selected-listitem)

[ZeeshanTamboli]

@ZeeshanTamboli, do you think we need to keep the new section under the Deeper Elements, right?

Yes, under the Deeper Elements section and below the Slider example.

What do you think about rendering the example list, like the sliders rendered in the following documentation (https://mui.com/material-ui/integrations/interoperability/#deeper-elements-4)? Something like this: (https://mui.com/material-ui/react-list/#selected-listitem)

Yes, sounds good 👍

[ZeeshanTamboli]

@RubemAZ I made the expected changes. Thanks for the PR!