如何在位于多个文件中的多个组件之间共享JSS类？

Question

我正在将React与Material UI一起使用，现在正在重构我的组件之一。我的原始组件看起来像这样：

// All the import statements here

const styles = theme => ({
  container: {
    margin: 'auto',
    maxWidth: '1200px',
    background: theme.palette.primary.main
    // More styles here
  },
});

const Component = ({ classes }) => (
  <div>
    <div className={classes.container}>
      {/* Some content */}
    </div>
    <div className={classes.container}>
      {/* Some content */}
    </div>
  </div>
);

export default withStyles(styles)(Component);

但是在重构组件之后，我需要在两个不同的组件中访问“容器”类。我唯一能想到的方法是在根目录下创建一个名为sharedStyles.js的新文件，然后将其导入到这两个组件中并扩展其样式对象，如下所示：

文件：sharedStyles.js

export default theme => ({
  container: {
    margin: 'auto',
    maxWidth: '1200px',
    background: theme.palette.primary.main
    // Some more styles
  },
});

文件：NewComponent.js

// All the import statements here - including the sharedStyles.js

const styles = theme => ({
  ...sharedStyles(theme),
  // Some more styles
});

const NewComponent = ({ classes }) => (
  <div className={classes.container}>
    {/* Some content */}
  </div>
);

export default withStyles(styles)(NewComponent);

文件：RefactoredComponent.js

// All the import statements here - including the sharedStyles.js 
// and NewComponent.js

const styles = theme => ({
  ...sharedStyles(theme),
  // Some more styles
});

const RefactoredComponent = ({ classes }) => (
  <div>
    <NewComponent />
    <div className={classes.container}>
      {/* Some content */}
    </div>
  </div>
);

export default withStyles(styles)(RefactoredComponent);

即使这种方法可行，我也不是很喜欢。所以我的问题是：是否有更好的方法来跨多个文件中的多个组件共享一个JSS类？。