styleOverrides on custom components

[simplecommerce]

Hi,

I am using this library with MUI v5 and I was wondering how do I achieve the following?

I have a component like this:

const styles = theme => ({
   root: { 
      // some styles here
   }
})

const MyComponent = props => {
   const { classes } = useStyles(styles,props,"MyComponent"); // our own implementation that passes MyComponent as a name to the makeStyles function.

   return <div className={classes.root} />
}

With this sample, I am able to put this in my theme.

{
  components: {
     MyComponent: {
        styleOverrides: {
            root: {
                // theme override
            }
        }
     }     
  }
}

My question is the following, In some cases, I need to override the styles from inside a component.
So for example:

const styles = theme => ({
   root: { 
      MyComponent: {
         root: { 
            // override theme style for MyComponent
         }
      }
   }
})

const MyCustomComponent = props => {
   const { classes } = useStyles(styles,props,"MyCustomComponent"); // our own implementation that passes MyComponent as a name to the makeStyles function.

   return <div className={classes.root}><MyComponent /></div>;
}

I was wondering if something like this is possible at all?

Before migrating to v5 and using tss, I used to to it by adding a mapValues of the classes generated by the component in order to generate a MyComponent-root style with no random keys so that we could target it by doing

"& .MyComponent-root": {}

But since I removed this option it no longer works to target the style like this and I thought maybe there was a better option.

I hope I am clear in my question, any help is appreciated, thanks!

[garronej]

hi @simplecommerce,
Sound like something you would acheive using nested selectors.
Let me know if it helps

[simplecommerce]

Thanks for the quick response!

I don't think it works in my case since the component's style I am trying to target is not within the same component, if this makes any sense.

For example, I have an TabPanel that is part of a custom component I created called TabsList. It uses useStyles and defines its own classes.
I call my TabsList inside a page, and in this page, I have its own styles also using useStyles and classes.
In my page, I want to be able to define my classes styles which would override/target the TabsList/TabPanel style.
I assume from this logic, it wouldn't work with the nested selectors.

[simplecommerce]

I tried a few things with the nested selectors and it doesn't seem to work.

The only way I was able to target my component's class that is declared elsewhere, was doing the following.

"& > [class*=\"SCGenericTabsList-tabPanel\"]": {}

I don't know if this is actually a good approach vs the class name directly performance wise.
In the previous version of MUI we had to create our own createGenerateClassName in order to inject our component class name without the hash added to it. While we didn't remove the prefixed one, we simply added a copy of the one without the hash prefix.

That way we were able to do:

"& > .SCGenericTabsList-tabPanel": {}

Since I don't see any way of doing it by using the provided options I assume I would have to create my own copy of makeStyles to append the name.

I know I could manually go in all components and add a static class name to each place where classes.[name] is used, but I prefer a automated approach.