通過直接訪問DOM應用CSS模塊類名稱

Question

我有一個使用CSS模塊的組件，通過babel-plugin-react-css-modules插件。

在組件生命週期中的某些點上，我希望能夠通過直接訪問DOM來計算它的新維度。

在我的SCSS樣式表中，我有一個名爲.full-width的類，我想將其應用於組件的DOM元素，以便進行計算，然後再次將其刪除。

現在，因爲添加類並稍後刪除它不會影響組件或其狀態，所以我想通過直接訪問DOM來添加和刪除類，而不是通過某種方式關聯它到組件的state。

如果我做this.DOMReference.classList.add('full-width');類full-width被添加到它，但我想添加類的模塊化的版本，因爲它會如果我沒有styleName="full-width"（例如Component__full-width___Pjd10）

應用有什麼辦法要做到這一點，而不是使.full-width成爲全球聲明？

我可以用react-css-modules來做到這一點嗎？

Answer 1

好了，我才意識到我可以導入的樣式的變化下，而不是匿名，例如

import styles from './styles.scss'而不是import './styles.scss'，然後我可以用它作爲這樣

this.DOMReference.classList.add(styles['full-width']);

我也不需要使用styleName="styles.someClass"，我可以簡單地使用styleName="someClass"（只要只導入一個樣式表文件，否則你需要像前一樣做）

我想聽聽任何更好的方法來做到這一點。