import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
并且在组件中不允许这样调用样式表,它们应该以模块化的方式调用
组件/按钮模块css
/*
You do not need to worry about .error {} colliding with any other `.css` or
`.module.css` files!
*/
.error {
color: white;
background-color: red;
}
组件/按钮.js
import styles from './Button.module.css'
export function Button() {
return (
<button
type="button"
// Note how the "error" class is accessed as a property on the imported
// `styles` object.
className={styles.error}
>
Destroy
</button>
)
}
1条答案
按热度按时间wnrlj8wa1#
在Next.js中,你可以在一个元素中添加多个类名,只需要用空格将它们分开,这和普通的HTML和CSS是一样的。
如果要将多个类添加到元素中,则可以使用模板字符串将它们连接在一起。如果要根据特定条件有条件地添加或删除类,则这会很有用。
但是如果你添加外部.css,你只能调用
pages/_app.js
页面内部并且在组件中不允许这样调用样式表,它们应该以模块化的方式调用
组件/按钮模块css
组件/按钮.js
您可以在here中阅读更多信息