Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions website/docs/en/guide/styling/css-modules.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,40 @@ export default {

If you need to customize other configs of CSS Modules, you can set them via [output.cssModules](/config/output/css-modules).

## Global styles

In some cases, you may need to use global styles in CSS Modules, such as overriding the styles of third-party libraries or setting global styles for specific elements.

CSS Modules provides the `:global()` pseudo-class selector to achieve this functionality, and the selectors inside `:global()` will remain the original class names, allowing them to correctly match global elements.

```css title="styles.module.css"
/* Local selectors, will be hashed */
.container {
padding: 20px;
}

/* Global selectors, will not be hashed */
:global(.foo) {
color: red;
}

/* Use local and global selectors together, only .wrapper will be hashed */
.wrapper :global(.bar) {
margin: 10px;
}
```

You can also nest `:global()`:

```css title="card.module.css"
.card {
/* Only affects .btn elements inside .card */
:global(.btn) {
background: blue;
}
}
```

## Type declaration

When you import CSS Modules in TypeScript code, TypeScript may prompt that the module is missing a type definition:
Expand Down
34 changes: 34 additions & 0 deletions website/docs/zh/guide/styling/css-modules.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,40 @@ export default {

如果你需要自定义 CSS Modules 的其他配置,可以通过 [output.cssModules](/config/output/css-modules) 进行设置。

## 全局样式

在某些情况下,你可能需要在 CSS Modules 中使用全局样式,比如覆盖第三方库的样式,或者为特定元素设置全局样式。

CSS Modules 提供了 `:global()` 伪类选择器来实现这个功能,`:global()` 内的选择器会保持原始的类名,使它能够正确地匹配全局元素。

```css title="styles.module.css"
/* 本地选择器,会被哈希化 */
.container {
padding: 20px;
}

/* 全局选择器,不会被哈希化 */
:global(.foo) {
color: red;
}

/* 组合使用本地和全局选择器,只有 .wrapper 会被哈希化 */
.wrapper :global(.bar) {
margin: 10px;
}
```

你也可以嵌套使用 `:global()`:

```css title="card.module.css"
.card {
/* 只影响 .card 内部的 .btn 元素 */
:global(.btn) {
background: blue;
}
}
```

## 类型声明

当你在 TypeScript 代码中引用 CSS Modules 时,TypeScript 可能会提示该模块缺少类型定义:
Expand Down
Loading