[Next] 從 css 轉換至 css module

Next.js 如果想在元件層級直接像這樣 import ‘./xxx.css’ 插入css，會遇到這個錯誤

Global CSS Must Be in Your Custom \<App>

然而總不能每一個 css 都插到 pages/_app`，當成global css來用

於是 Next.js 自己也提出了數種解決方案

其中一種是 Adding Component-Level CSS

不過腦袋轉不太過來，還是靠同事的幫忙

在此記錄一下轉換的過程

這裡我的 Carousel 的結構大概是

<div>
  <Slider {...setting}>

而 Slider 內部則為

<ul>
  <li>
    <button>

而 setting 可以在裡面塞要添加到 <button/> 上的 class 名

settings={
  ...
  dotsClass: 'carousel-dot',
}

所以實際上大概是

<div>
  <ul>
    <li class="slick-active">
      <button class="carousel-dot">

(slick-active為套件內設計，當滑到該張圖片會添加到 li 上的 class 名)

而 card 的結構大致是

<div class="card-wrapper">
  ...
    <div class="card-title">

原本的 css :

// carousel.css
.carousel-dot::before {
  @apply text-white !important;
  opacity: 1 !important;
}
.slick-active button::before {
  @apply text-primary !important;
}

.card-wrapper:hover .card-title {
  @apply text-primary;
}

上半部是為了修改 React Slick 裡輪播的切換點的顏色

下半部是為了讓區塊被 hover 時 title 的顏色會跟著改變

（現在仔細一看這怎麼會放在同一個檔案裡…）

首先要當檔名改為 xxx.module.css

import styles from './carousel.module.css'

由於 <Slider/>的結構是藏在套件中，用這種 import 法修改不到，所以 slick-active 的 style 覆蓋需要換個方法，變成從外側的 div 伸入

carousel.module.css 改寫成

.carousel li button.carousel-dot::before {
  @apply text-white;
  opacity: 1;
}
.carousel :global(li.slick-active) button.carousel-dot::before {
  @apply text-primary;
}

這裡要注意由於 li 並非屬於此元件，需要使用 ( :global ) 宣告為全局

Carousel 則改成這樣

import styles from './carousel.module.css'
export default function Carousel(...){
...
  return (
    <div className={styles.carousel}>
      <Slider {...setting}>
  )
}

Card 的 css 則不用特別改變

// card.module.css
.card-wrapper:hover .card-title {
  @apply text-primary;
}

Card部分則如此修改

import classNames from 'classnames'
import styles from './card.module.css'
export default function Card(...){
...
  return (
    <div class={styles['card-wrapper']}>
      ...
        <div class={styles['card-title']}>
  )
}

Card的部分相當單純，而 Carousel 的部分因為牽扯到修改套件的 style，採取調整選擇器的方式處理，希望下次遇到這種狀況時腦袋也能轉一下…