javascript - 如何在我的 JSS 样式反应组件之间保持一致的类名？

Question

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

盒子类

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 中找到子组件。