從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

回答