对NextJS的自定义CSS支持

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

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

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

export default Footer

从“React”导入React
导入“../style/custom.module.css”
函数页脚（）{
返回(
)
}
导出默认页脚

我的自定义CSS文件位于

style/custom.module.css

---

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

您使用的是

CSS模块

，您必须以不同的方式导入

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


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

export default Footer

从“../../style/custom.module.css”导入样式
函数页脚（）{
返回(
)
}
导出默认页脚

您可以通过从@emotion/Styled导入样式化组件来创建自定义样式化组件，并通过为特定标记创建自定义组件来使用此样式化组件进行样式化。 您可以在同一个文件中，也可以在类之外，或者在另一个组件中执行此操作。 要在同一文件中创建，可以按以下方式执行：-

import styled from "@emotion/styled";

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

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

h1

标记

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

从“文件路径”导入自定义标题

---

之后，您可以使用此组件代替

h1

标记。

从'./error.module.css'

导入样式，并使用

className={style.error}