在多个组件中重用JSS

Question

我正在尝试通过Material UI和React使用JSS。

我不确定这是否是正确的方法，但是我正在创建一个名为SharedStyles.js的全局JSS样式表，然后将其导出到所有组件。我有很多样式，但是我将以backgroundColor为例。

SharedStyles.js

export const layout = {
  main:{
    backgroundColor: '#3d6a7a',
  },
}
const SharedStyles = theme => ({
  "layout.main": layout.main
});
export default SharedStyles;

我要导出到的组件

import SharedStyles, {layout} from '../../../styles/SharedStyles.js';

const { classes } = props;

<Grid container spacing={16} className={classes["layout.main"]}></Grid>

我在网上使用了一个示例来说明这一点，但它对我不起作用。

style={layout.main}可行，但我想知道这是否是最佳实践，还是应该坚持使用className