如何在我的JSS样式的React组件之间保持一致的className？

Question

我有一个使用jss样式化的组件“ Box”。设置样式后，将为其生成一个生成的className，通常类似于“ box-16”。我有另一个组件'BoxStack'，其中包含组件。当我使用jss设置样式时，我有某些规则会影响其中的组件，但是这些样式正在搜索与s命名不同的className。

Box类

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组件，但寻找错误的className

我只想知道如何确保这些类保持一致的名称，以便可以从父组件的jss中找到子组件。