Next.js 中使用 styled-jsx 加载外部样式的实现方式

在 Next.js 中，styled-jsx 是一种非常流行的 CSS-in-JS 解决方案，它允许你在组件内定义 CSS 样式，并且可以自动处理样式的作用域问题。但是，在实际开发中，我们通常需要加载外部 CSS 样式文件，本文将介绍如何在 Next.js 中使用 styled-jsx 加载外部样式。

styled-jsx 的基本用法

在 Next.js 中使用 styled-jsx 非常简单，只需要在组件内部使用 <style jsx> 标签即可，例如：

// javascriptcn.com 代码示例
import React from 'react'

const Button = () => (
  <button className="button">
    Click me
    <style jsx>{`
      .button {
        background-color: #0070f3;
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 8px 16px;
        font-size: 16px;
        cursor: pointer;
      }
    `}</style>
  </button>
)

export default Button

在上面的例子中，我们在 <style jsx> 标签内部定义了一个 .button 类，它被应用到了 <button> 元素上。styled-jsx 会自动处理样式的作用域问题，确保样式只作用于当前组件内部。

加载外部样式

如果我们希望使用外部样式文件，我们可以使用 @import 关键字来引入外部样式文件。例如：

// javascriptcn.com 代码示例
import React from 'react'

const Button = () => (
  <button className="button">
    Click me
    <style jsx>{`
      @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

      .button {
        background-color: #0070f3;
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 8px 16px;
        font-size: 16px;
        cursor: pointer;
        font-family: 'Roboto', sans-serif;
      }
    `}</style>
  </button>
)

export default Button

在上面的例子中，我们使用 @import 关键字引入了来自 Google Fonts 的 Roboto 字体。注意，我们仍然需要将样式定义在 <style jsx> 标签内部，否则 styled-jsx 无法处理样式的作用域问题。

使用外部样式文件

如果我们希望在 Next.js 中使用外部样式文件，我们可以使用 styled-jsx-plugin-sass 插件来支持 Sass 或者 Scss 文件。首先，我们需要安装插件：

npm install --save-dev styled-jsx-plugin-sass

然后，我们需要在 next.config.js 文件中配置插件：

const withSass = require('styled-jsx-plugin-sass')

module.exports = withSass({
  webpack(config, options) {
    return config
  },
})

现在，我们可以在组件内部使用 @import 关键字引入外部 Sass 或者 Scss 文件了。例如：

// javascriptcn.com 代码示例
import React from 'react'

const Button = () => (
  <button className="button">
    Click me
    <style jsx>{`
      @import './button.scss';

      .button {
        background-color: #0070f3;
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 8px 16px;
        font-size: 16px;
        cursor: pointer;
      }
    `}</style>
  </button>
)

export default Button

在上面的例子中，我们使用 @import 关键字引入了 button.scss 文件，它定义了 .button 类的样式。注意，我们需要将文件路径包含在引号内部，并且不需要添加文件扩展名。

总结

在 Next.js 中使用 styled-jsx 加载外部样式非常简单，我们可以使用 @import 关键字引入外部样式文件，也可以使用 styled-jsx-plugin-sass 插件来支持 Sass 或者 Scss 文件。通过使用 styled-jsx，我们可以更加方便地管理组件的样式，并且可以自动处理样式的作用域问题，避免样式冲突的问题。

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