What is currently possible:

Giving style to whole Mui component

<SimpleTreeView
  sx={{
   backgroundColor: '#000000'
  }}
</SimpleTreeView>

Segregate styling to a separate class in .module.scss file

.tree {
 background-color: #000000
}

and then import it in the react component and inject it in className of the Mui element

import styles from 'component.module.scss'

<SimpleTreeView
  className={styles.tree}
</SimpleTreeView>

What I want to achieve:

Apply styling on a nested component using mui custom classes, the below code will apply the style to all nested elements with the class ‘Mui-selected’. This is possible and widely used.

<SimpleTreeView
  sx={{
   '&& .Mui-selected': {
     backgroundColor: '#000000'
   }
  }}
</SimpleTreeView>

Now my question is, how to segregate the above code’s styling to a separate .module.scss file?

What I have tried (didn’t work)

className={styles.tree}

and the following in .module.scss file

.tree .Mui-selected {
    background-color: #90EE90 !important;
}

className={styles.tree}

and the following in .module.scss file

.tree {
 .Mui-selected {
   background-color: #90EE90 !important
 }
}