jss to override a material-ui nondeterministic class

Question

I'm trying to create a custom style for material textField and need a JSS selector that reaches a nondeterministic classname.

Style would look something like this:

const styles = {
  '@media (min-width: 768px)': {
     borderLabel: {
     top: 2,
     '&.MuiInputLabel-shrink':{
        top: -2,
      }
    }
}

The issue is MuiInputLabel-shrink is also generated by jss and has a xxx number suffix. Is there any selector that work on generated classes?

Benjamin Mørch Rindarøy Benjamin Mørch Rindarøy · Accepted Answer · 2018-08-17T11:24:27

Material-ui have a built in API where you can override mostly of the styling.

Assuming you are using material-ui in react, you can override shrink in the classes property in InputLabel component.

<InputLabel 
    classes={{ 
        shrink: classes.shrinkStyle 
    }} 
/>

Read the documentation to find the right component to override. There is also attached code to help you on the way. https://codesandbox.io/embed/l32qn5p18q

Link to similar problem in GitHub: https://github.com/mui-org/material-ui/issues/10468

Now then back to style through JSS

There is some possibilites to style with JSS through nesting. I've not researched huge lot on this, but I know that you can use nested JSS. Example:

const styles = {
  '@media (min-width: 768px)': {
     borderLabel: {
       //styling
       '&>div':{
         //styling
       }
       '&>div>div>td':{
         '& svg':{
           //styling
         }
       }
     }
   }
}

You should also read JSS documentation

jss to override a material-ui nondeterministic class

1 Answers