Как я могу сохранить единообразие classNames между моими компонентами реакции стилей JSS?

Question

У меня есть компонент Box, стилизованный под jss. После того, как он стилизован, ему будет присвоено сгенерированное имя класса, которое обычно выглядит как "box-16". У меня есть еще один компонент BoxStack, в котором есть компоненты. Когда я создаю стиль с помощью jss, у меня есть определенные правила, влияющие на компоненты внутри него, но эти стили ищут другое имя класса, а не то, что названо.

Класс коробки

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  box: {
    width: '300px',
    backgroundColor: '#fff',
    boxSizing: 'border-box',
    padding: '20px'
  }
});

const Box = (props) => {
  const classes = useStyles();

  return <div className={classes.box}>{props.children}</div>;
};

export default Box;

Конвертированный css:

Пример кода для класса BoxStack, ищущий дочерний блок на панели инструментов

proven_path_dashboard: {
    margin: '0 auto',
    width: '940px',
    maxWidth: '100vw',
    '&$box': {
      width: [['460px'], '!important'],
      '@media screen and (max-width: 800px)': {
        width: '100%'
      }

Пример сценария, который ищет компонент Box, но ищет неправильное имя класса

Я просто хотел бы знать, как убедиться, что классы сохраняют согласованное имя, чтобы дочерние компоненты можно было найти из родительского компонента jss.