0

我有以下 .scss 文件

div.topMenuIndex {
  ul {
    &:before {
      content: "☰";
      padding: .15em .25em;
      text-align: center;
      background: #ea764b;
      color: #f8d4c6;
    }   
  &.LoginStatus{
    background: azure;
  }
}

现在我将它导入到我的反应组件中

import styles from "./TopMenuIndex.scss";

定义组件时，如何在 div 元素中引用 div.topMenuInde​​x.LoginStatus

你好吉姆

4

3 回答 3

0

您可以使用className=""

所以在你的情况下，把<div className="topMenuIndex LoginStatus"></div>

于 2017-02-23T21:59:08.423 回答
0

如果可以的话，我强烈推荐使用react-css-modules 。你只需要用装饰器包装你的组件，但是使用你的样式会容易得多。

就是这样 npm i -S react-css-modules

在 YourComponent.js 中 import CSSModules from 'react-css-modules' import styles from "./TopMenuIndex.scss";

然后在您的组件中的某个地方，您只需将它们用作名称，但使用 styleName 而不是 className

<div styleName="topMenuIndex LoginStatus">test</div>

最后你像这样导出你的组件

export default CSSModules(YourComponent, styles, { allowMultiple: true });

于 2017-02-24T23:57:35.797 回答
0

该styles对象将您的所有类名作为键并hash作为值对应。

所以你需要使用styles[<classname>]

例子

<div className={`${styles[topMenuIndex]} ${styles[LoginStatus]}`} />

希望这可以帮助！

于 2017-02-24T08:59:13.807 回答