NextJS 的自定义 CSS 支持

Posted

技术标签:

【中文标题】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 标签。

【讨论】:

以上是关于NextJS 的自定义 CSS 支持的主要内容,如果未能解决你的问题,请参考以下文章

如何从 nextjs 中的自定义服务器 console.log

在 Next JS 中,Material UI makeStyles 在刷新时撤消自定义 css

NextJS - 无法在 Tailwind CSS 中使用自定义颜色

TailwindCSS + NextJS:集成 PostCSS 和 IE11 支持(自定义属性)

使用 NextJS 的自托管字体

带有 css 或 jquery 的自定义滚动条 firefox