Next.js 中使用 styled-components 的技巧和注意点-JavaScript中文网-JavaScript教程资源分享门户

在前端开发过程中，我们经常使用 CSS 来美化网页的样式。然而，CSS 样式表通常不是组件化的，很难维护，并且很容易造成样式的冲突。这时，一些工具，比如 React 的 styled-components，就能很好地解决这个问题。

本文将在 Next.js 的基础上，介绍使用 styled-components 的技巧和注意点。

前置知识

React 的基础知识
Next.js 的基础知识
styled-components 的基础知识

安装与配置

首先，安装 styled-components：

npm install --save styled-components

接下来，根据项目需要，你需要在 pages/_document.js 文件中添加以下代码来启用服务器端渲染：

import Document from 'next/document';
import { ServerStyleSheet } from 'styled-components';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;
    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
        });
      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}

export default MyDocument;

基本使用

在使用 styled-components 时，你需要引入 styled 函数，并使用它来创造样式组件。下面是一个简单的例子：

import styled from 'styled-components';

const Button = styled.button`
  color: palevioletred;
  font-size: 1.5em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// 使用
<Button>Click me!</Button>

这个例子中，我们创建了一个按钮组件，它包含了一些样式。我们可以直接在 JSX 中使用它，而不必去关心样式的具体实现。

样式继承

styled-components 支持生成基于其他样式组件的组件，这对于解决样式冲突非常有帮助。通过 extend 属性，我们可以定义一个组件基于另一个组件的样式来生成。

const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

// 使用
<TomatoButton>Click me!</TomatoButton>

在这个例子中，我们定义了一个 TomatoButton 组件，它继承了 Button 组件的样式。然而，它自身的颜色和边框颜色被修改为了番茄色。

Props 属性

你也可以通过传递 props 属性，来决定样式组件最终的样式。比如：

const Button = styled.button`
  color: ${props => (props.primary ? 'white' : 'palevioletred')};
  background-color: ${props => (props.primary ? 'palevioletred' : 'white')};
  font-size: 1.5em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// 使用
<Button>Normal</Button>
<Button primary>Primary</Button>

在这个例子中，我们为 Button 组件添加了 primary 属性。如果 Button 组件有 primary 属性，其样式将会被修改。

与 CSS Modules 的结合

在使用 Next.js 时，我们经常使用 CSS Modules 来管理样式。styled-components 也很好地支持与 CSS Modules 的结合。

import styled from 'styled-components';
import styles from './Button.module.css';

const Button = styled.button`
  composes: ${styles.btn};
  font-size: 1.5em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
`;

// 使用
<Button>Click me!</Button>

在这个例子中，我们使用 composes 属性来将 CSS Modules 中的类继承到 Button 组件中。这样，我们就可以同时使用 styled-components 和 CSS Modules 管理样式了。

总结

在本文中，我们介绍了 Next.js 中使用 styled-components 的技巧和注意点。我们学习了 styled-components 的基本使用方法、样式继承、Props 属性、以及与 CSS Modules 的结合。

在实践中，我们应该善于使用 styled-components 这个工具，来更好地管理组件的样式，并且避免样式的冲突。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65ad0e1fadd4f0e0ff6a217d