Material UI @styles syntax when multiple class selectors

I'm having a React-app with a css-file: App.css from where I'm importing styles at the moment. I would like to remove this css-file and use Material-UI styling solution instead (https://material-ui.com/styles/basics/).

I'm also having nested theme providers, so I would have to use certain type of syntax to get this to work. (You could check this question/solution here: Material UI nested theme providers breaks withStyles HOC).

In my css-file I have these types of classes:

.class-one,
.class-two,
.class-three {
  position: relative;
}

Which I got working with Material-ui styles when I used this syntax:

const useStyles = makeStyles(() => ({
  root: {
     '& [class*="class-one"],& [class*="class-two"],& [class*="class-three"]': {
       position: 'relative'
     }
  }
}))

However, how these classes should be typed?

.parent-class .child-class {
  position: relative;
}

I have tried this and couple of other minor variants from this example, but can't get it to work:

const useStyles = makeStyles(() => ({
  root: {
     '& [class*="parent-class"] [class*="child-class"]': {
       position: 'relative'
     }
  }
}))

What would be the correct way to type this?

Example component:

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import SomeComponent from 'some-library'

const useStyles = makeStyles(() => ({
  root: {
     '& [class*="parent-class"] [class*="child-class"]': {
       position: 'relative'
     }
  }
}))

const App = () => {
  const classes = useStyles()

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

Thanks!