Important

強制讓所有產生出來的 atomic CSS 宣告都包含 !important。

當你要把 PikaCSS 整合進一個帶有高 specificity 樣式的既有專案時，你可能會需要讓所有產生出來的原子 class 都在層疊中勝出。設定 important: { default: true } 會為每一個產生出來的 CSS 值加上 !important。

設定

import { defineEngineConfig } from '@pikacss/core'

export default defineEngineConfig({
  important: { default: true },
})

針對個別定義的覆寫

每一筆樣式定義都可以用 __important 旗標覆寫設定好的預設值：

• __important: false 會在 important.default 為 true 時，讓某筆定義退出。
• __important: true 會在預設值為 false（或未設定）時，讓某筆定義加入。

// 在 `important: { default: true }` 之下，這筆定義輸出時不帶 `!important`
pika({
  __important: false,
  color: 'blue',
})

// 使用預設設定時，只有這筆定義輸出時會帶 `!important`
pika({
  __important: true,
  color: 'red',
})

明確設定的 __important 旗標也會傳遞到巢狀選擇器區塊中，而這些區塊可以用自己明確設定的旗標覆寫它。

範例

輸入

const className = pika({
	color: 'red',
	fontSize: '16px',
})

// 即使 `important.default` 為 true，仍可針對個別定義選擇退出
const optOut = pika({
	__important: false,
	color: 'blue',
})

輸出

@layer utilities {
  .pk-a {
    color: red !important;
  }
  .pk-b {
    font-size: 16px !important;
  }
  .pk-c {
    color: blue;
  }
}

下一步

• Preflights：在 utility 之前注入基礎 CSS。
• Layers：控制層疊順序。