NextJS 的自定义 CSS 支持

Posted 2023-02-22

【中文标题】NextJS 的自定义 CSS 支持

【英文标题】：Custom CSS Support for NextJS

【发布时间】：2021-05-29 18:13:42

【问题描述】：

我正在尝试将我的自定义 CSS 库用于 NextJS 中的组件。在我的组件中，我想导入我的自定义 CSS 文件，但它不起作用。

import React from 'react'
import '../../style/custom.module.css'

function Footer() 
  return (
    <div className="a b">
      
    </div>
  )


export default Footer

我的自定义 CSS 文件在里面

style/custom.module.css

我看过 nextJS 文档，他们提到在 NextJS 版本中默认支持自定义 CSS 样式

【问题讨论】：

import styles from './error.module.css' 并使用className=styles.error

【参考方案1】：

您正在使用css module，您必须以不同方式导入

import styles from '../../style/custom.module.css'


function Footer() 
  return (
    <div className=styles.yourcssclassname>
      
    </div>
  )


export default Footer

【参考方案2】：

您可以通过从@emotion/styled 导入样式组件来制作自定义样式组件，并使用此样式组件通过为特定标签制作自定义组件来提供样式。 您也可以在您的类之外的同一个文件中或在另一个组件中执行此操作。 要在同一个文件中制作，您可以这样做：-

import styled from "@emotion/styled";

const CustomHeading=styled.h1`
color:yellow;
`

使用此自定义标题组件代替 h1 标记。

要在不同的文件中定义自定义组件，您将使用相同的方法定义，但您需要将该自定义组件导入您需要将其导入的文件中：

import CustomHeading from "File path" 之后，您可以使用此组件代替您的h1 标签。