自定义CSS支持NextJS

Question

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

import React from 'react'
import '../../style/custom.module.css'
function Footer() {
return (
<div className="a b">

</div>
)
}
export default Footer

我的自定义CSS文件在

风格/custom.module.css

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

Answer 1

您使用的是css module，您必须以不同的方式导入

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

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

</div>
)
}
export default Footer

Answer 2

首先，-将CSS模块导入主模块

• ，然后传递给需要css样式的页面。

Answer 3

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

import styled from "@emotion/styled";
const CustomHeading=styled.h1`
color:yellow;
`

使用这个自定义标题组件来代替h1标签。

要在不同的文件中定义自定义组件，您将使用相同的方法进行定义，但是您需要在需要导入该自定义组件的文件中导入该自定义组件，如下:

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