如何将React-JSS样式移动到单独的文件？

Question

我和我的同事已经成功使用React-JSS：https://cssinjs.org/react-jss

但是，迄今为止，样式已嵌入到React组件文件中。随着样式数量的增加，我们希望将其移至styles.js或styles.css文件中（我们不在乎）。

到目前为止，尝试此操作尚未成功。

做任何事的人都能提供一些提示吗？

Answer 1

听起来您的文件很大，包含很多组件，而且样式的数量似乎是问题所在。

我想说的是将您的组件拆分为单独的文件，并保持样式接近组件。

我不建议在没有样式的情况下重复使用样式，因为这会导致泄漏。

Answer 2

OMG，我不知道为什么今天早些时候事情不起作用。我只是像这样将样式代码放入styles.js中：

const styleSheet = {
  mainContainer: {
  height: '100vh',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  },
  backDrop: {
    minHeight: '100vh',
  },
  // ... more styles here
};

导出默认styleSheet;

然后使用import styleSheet from './styles.js';

将其导入到React组件文件中

一切正常！谢谢大家的启发。