How can I keep consistent classNames between my JSS styles react components?

Question

I have a component 'Box' that is styled with jss. After it's styled, it will be given a generated className that's usually something like 'box-16.' I have another component 'BoxStack' that has components within it. When I style the with jss, I have certain rules to affect the components within it, but those styles are searching for a different className then what the 's are named.

Box class

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;

Converted css:

Example code for the BoxStack class, looking for a child box within a dashboard

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

Example script looking for the Box component, but looking for the wrong className

I would just like to know how to make sure the classes keep a consistent name, so child components can be found from a parent component's jss.