在Next.js中，你可以在一个元素中添加多个类名，只需要用空格将它们分开，这和普通的HTML和CSS是一样的。

<div className="class1 class2">Content goes here</div>

如果要将多个类添加到元素中，则可以使用模板字符串将它们连接在一起。如果要根据特定条件有条件地添加或删除类，则这会很有用。

const isHighlighted = true;
const isDisabled = false;

<div className={`button ${isHighlighted ? 'highlighted' : ''} ${isDisabled ? 'disabled' : ''}`}>
  Click me
</div>

但是如果你添加外部.css，你只能调用pages/_app.js页面内部

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>
  )
}

您可以在here中阅读更多信息