在 Next.js 中使用自定义的 CSS，有几种不同的方法可以实现：
1. **全局样式**：
- 将 CSS 文件放在 `pages/_app.js` 或 `pages/_app.tsx` 文件中，并使用 `import` 语句引入 CSS 文件。这样，样式将应用于整个应用程序。
```jsx
// pages/_app.js 或 pages/_app.tsx
import '../styles/global.css';
function MyApp({ Component, pageProps }) {
return ;
}
export default MyApp;
```
2. **模块化样式**：
- 使用 CSS Modules，为每个组件创建独立的 `.module.css` 文件。这有助于避免样式冲突，并使组件更加模块化。
```jsx
// components/MyComponent.module.css
.title {
font-size: 24px;
color: blue;
}
// components/MyComponent.js 或 components/MyComponent.tsx
import styles from './MyComponent.module.css';
const MyComponent = () => (
Hello, World!
);
export default MyComponent;
```
3. **内联样式**：
- 直接在组件内部使用 JavaScript 对象定义样式，并通过 `style` 属性应用到元素上。
```jsx
const MyComponent = () => {
const titleStyle = {
fontSize: '24px',
color: 'blue'
};
return Hello, World!
;
};
export default MyComponent;
```
4. **CSS-in-JS 库**：
- Next.js 支持使用 CSS-in-JS 库，如 `styled-components` 或 `emotion`。这些库允许你以 JavaScript 的方式编写 CSS，并提供强大的样式组合和继承功能。
```jsx
// 使用 styled-components
import styled from 'styled-components';
const Title = styled.h1`
font-size: 24px;
color: blue;
`;
const MyComponent = () => (
Hello, World!
);
export default MyComponent;
```
选择哪种方法取决于你的项目需求和偏好。全局样式适用于定义应用程序范围内的样式，而模块化样式和 CSS-in-JS 库则更适合组件级别的样式管理。内联样式通常用于动态样式或小规模的项目。
AI助手
资讯
常用工具
网站模板