NextJS更改NextJS生成的Classname

Question

这是Heading组件的JSX:

<h1 className={classes.defaultHeading}>This is a heading</h1>

当我在浏览器中检查元素时，它看起来像这样:

<h1 class="heading_defaultHeading__Rr0GL">This is a heading</h1>

我希望classname格式只是类名——例如，我希望上面生成的代码看起来像这样:

<h1 class="defaultHeading">This is a heading</h1>

我怎样才能做到这一点?

Answer 1

而不是使用CSS模块，这些模块将自动创建一个唯一的类名(对于组件级CSS很有用)。

考虑在pages/_app.js文件中导入尽可能多的纯css样式表:

global.css

.defaultHeading {
background-color: red;
}

_app.js

import '../global.css'
import '../other-css-file.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}

components/Heading.jsx

<h1 className="defaultHeading">This is a heading</h1>