對(duì)于我的應(yīng)用程序和組件的命名空間，我有以下約定:

<div id="app-name">

  <ul class="list">
    <li>item</li>
  </ul>

</div>

#app-name {

  .list {
    margin: 0;
  }

}

我想使用CSS模塊，但是，我不知道如何去轉(zhuǎn)換它，并保持應(yīng)用程序和組件名稱(chēng)間距的特殊性。我知道我可以簡(jiǎn)單地省略整個(gè)#app-name ID，但我喜歡這種特殊性。

想法？

您需要將兩個(gè)選擇器都引用到導(dǎo)入的樣式模塊中。

App.tsx

import style from './App.module.scss';
function App() {
  return (
    <div id={style['app-name']}>
      <ul className={style.list}>
        <li>item</li>
      </ul>
    </div>
  )
}

App .模塊. scss

#app-name {
  .list {
    margin: 0;
  }
}

這在以前是一個(gè)已知的問(wèn)題，他們?cè)噲D創(chuàng)建解決方法以達(dá)到預(yù)期的輸出。幸運(yùn)的是，這個(gè)問(wèn)題已經(jīng)解決。

我不確定它是否在所有實(shí)現(xiàn)中都有效，但是在Next.js中，您可以給css選擇器加上前綴:global，以允許它指向一個(gè)標(biāo)準(zhǔn)的類(lèi)名:

#app-name {
  :global .list {
    margin: 0;
  }
}

感謝GitHub上的ctsstc發(fā)現(xiàn)了這一點(diǎn)。

沒(méi)什么特別的，就像嵌套選擇器一樣嵌套你的元素

// style.module.scss
.container {
  .list {
    .item {
      background: red;
    } 
  }
}

// component.tsx
import styles from './style.module.scss';

export MyComponent: React.FunctionComponent = () => (
  <div className={styles.container}>
    <div className={styles.list}>
      <div className={styles.item}>
       Hello :-)
      </div>
    </div>
  </div>
)

試試這個(gè)

#app-name .list {
    margin: 0;
  }

下面的片段示例

#app-name .list {
    margin: 0;
  }

<div id="app-name">

  <ul class="list">
    <li>item</li>
  </ul>

</div>