从CSS模块访问全局类

我正在使用ReactJS和CSS模块，每个反应组件都有对应的SASS文件。从CSS模块访问全局类

在编写CSS时，每个类都会附加'三重下划线随机字符串' .myClass__e7G3A

根据滚动位置，我的应用程序将一个类（顶部'或'下'）添加到主体标记，我希望我的组件响应此。

我遇到的问题是，如果我在CSS模块中添加.top或.down，那么它会将唯一标识符附加到该类的末尾。

例如

JSX：

<div className={styles.main}> 
    Main content goes here. 
</div>

渲染HTML：

<body class="top"> 
    <div class="main___iZy2A"> 
    Main content goes here. 
    </div> 
</body>

SASS文件：

.top .main { 
    margin-top: 0; 
} 
.down .main { 
    margin-top: 100px; 
}

编译CSS：

.top___Gvf3S .main___iZy2A { 
    margin-top: 0; 
} 
.down___kpd3S .main___iZy2A { 
    margin-top: 100px; 
}

期望中的CSS结果：（.top和.down没有唯一标识符）

.top .main___iZy2A { 
    margin-top: 0; 
} 
.down .main___iZy2A { 
    margin-top: 100px; 
}

我敢肯定，我只是缺少一个简单的标识符或东西，可以实现这个。

希望你能帮上忙。谢谢。

2016-11-16 Ash

使用:global上的选择：

:global(.top) .main___iZy2A { 
    margin-top: 0; 
} 
:global(.down) .main___iZy2A { 
    margin-top: 100px; 
}

或:global组合和:local如果你有更多的一个全局选择：

:global .top .top--left :local .main___iZy2A { 
    margin-top: 0; 
} 
:global .down .down--right :local .main___iZy2A { 
    margin-top: 100px; 
}

2016-11-16 10:54:01

感谢。我认为这会很简单。 – Ash

回答