#### 6.4. Styled Components
Styled Components 的配置也大致如此，注意使用 `styled-components@6` 或者更高版本。
首先，创建一个全局注册表：
```javascript
'use client'
// lib/registry.js
import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
export default function StyledComponentsRegistry({ children }) {
const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
useServerInsertedHTML(() => {
const styles = styledComponentsStyleSheet.getStyleElement()
styledComponentsStyleSheet.instance.clearTag()
return <>{styles}
})
if (typeof window !== 'undefined') return <>{children}
return (
{children}
)
}
```
然后用此包含注册表的组件包裹根组件的 `children`：
```javascript
// app/layout.js
import StyledComponentsRegistry from './lib/registry'
export default function RootLayout({ children }) {
return (
{children}
)
}
```
然后你就可以在 page.js 中使用：
```javascript
'use client';
import styled from 'styled-components';
const Container = styled.div`
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem /* 24px */;
`;
const SkeletonInner = styled.div`
padding: 1rem /* 16px */;
background-color: rgb(24 24 27 / 0.8);
border-radius: 1rem /* 16px */;
`;
const SkeletonImg = styled.div`
height: 3.5rem /* 56px */;
border-radius: 0.5rem /* 8px */;
background-color: rgb(63 63 70 / 1);
`;
const SkeletonBtn = styled.div`
margin-top: 0.75rem /* 12px */;
width: 25%;
height: 0.75rem /* 12px */;
border-radius: 0.5rem /* 8px */;
background-color: rgb(255 0 128 / 1);
`;
const Skeleton = () => (
);
export default function Page() {
return (
Styled with Styled Components
);
}
```
示例代码地址：
### 7. Sass
#### 7.1. Sass 使用
Sass 作为知名的 CSS 预处理器已无须过多介绍。Next.js 内置了对 Sass 文件的支持，你需要使用 `.scss`和 `.sass`作为文件后缀。
你也可以结合 CSS 模块使用组件级别的 Sass， 你需要使用`.module.scss`或者 `.module.sass`作为文件后缀。
使用 sass，你需要首先安装 [sass](https://github.com/sass/sass)：
```javascript
npm install --save-dev sass
```
#### 7.2. 自定义配置
如果你希望配置 Sass 编译器，使用 `next.config.js` 的 `sassOptions`选项：
```javascript
// next.config.js
const path = require('path')
module.exports = {
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
},
}
```
#### 7.3 Sass 变量
Next.js 支持从 CSS 模块文件导出 Sass 变量。这是一个示例代码：
```javascript
// app/variables.module.scss
$primary-color: #64ff00;
:export {
primaryColor: $primary-color;
}
```
```javascript
// app/page.js
// maps to root `/` URL
import variables from './variables.module.scss'
export default function Page() {
return Hello, Next.js!
}
```
### 参考链接
1. [Styling: CSS Modules](https://nextjs.org/docs/app/building-your-application/styling/css-modules)
2. [Styling: Tailwind CSS](https://nextjs.org/docs/app/building-your-application/styling/tailwind-css)
3. [Styling: CSS-in-JS](https://nextjs.org/docs/app/building-your-application/styling/css-in-js)
4. [Styling: Sass](https://nextjs.org/docs/app/building-your-application/styling/sass)
5. [State of CSS 2023: CSS-in-JS](https://2023.stateofcss.com/zh-Hans/css-in-js/)