使用css模块,如何从文件中导入类

Question

我正在为我的项目使用css模块,我有一个文件positioning.css,它有一些我想导入的有用类.例如.right, .left

使用CSS模块的最佳方法是什么？

目前我可以看到两个选项,但它们并不是那么好:

组件风格的组成

.right {
    composes: right from '../styles/positioning.css';
}

要么

组件中的多个css模块导入

import positioning from '../styles/positioning.css'
import styles from './myComponent.css';
Object.assign(styles, positioning)

class Menu extends Component {

  render() {

    return (
      <div styleName='menu'>
        <div styleName='left'>this is left</div>
        <div styleName='right'>this is right</div>
      </div>
    );
  }
};

export default CSSModules(Menu, styles);

Answer 1

我已经设法让这个工作：

// css file
@value class-to-compose from "file-where-class-is-defined.css";

.someclass {
  composes: class-to-compose;
  // other styles
}

Answer 2

我会同意第一个建议。（结果安静一样）

• 两个命题都有相同的结果
• 如果有一天你必须编辑你的菜单 css，你只需要编辑你的菜单 css，而不是你的组件。
• 您让 CSSModule 做出决定。（更多未来证据？）