因为你问得很好;)（开玩笑的）

所以 Next.js 是一个固执己见的框架，它使用 CSS 模块来强制执行组件范围的样式。

基本上，您使用 name.module.css 文件名定义样式表并在其中添加常规 CSS。

.hidetheresult {
    visibility: hidden;
}

.showtheresult{
    visibility: visible;
}
  
.btn-hidetheresult {
    border-color: pink;
}

.btn-showtheresult {
    border-color: aqua;
}

现在要使用它，像导入任何 JS 模块一样导入它，

import styles from ''./styles.module.css''
console.log(styles);
// styles => {
//  hidetheresult: ''contact_hidetheresult__3LvIF'',//  showtheresult: ''contact_showtheresult__N5XLE'',//  ''btn-hidetheresult'': ''contact_btn-hidetheresult__3CQHv'',//  ''btn-showtheresult'': ''contact_btn-showtheresult__1rM1E''
//  }

如您所见，样式已转换为对象，现在您可以使用它们 像 styles.hidetheresult 或 styles[''btn-hidetheresult'']。

注意样式表中没有元素选择器。那是因为 CSS Modules 重写了类名，但它们不涉及标签名。在 Next.js 中 默认行为。即它不允许元素标签选择器。

带有 *.module.(css | scss | sass) 的文件扩展名是 css 模块，它们只能使用类名或 id 来定位元素，而不能使用标签名称。虽然这在 create-react-app 等其他框架中是可能的，但在 next-js 中是不可能的。

但是您可以在 next.config.js 文件中覆盖它。 （超出本答案的范围）

有一个 article 解释了如何覆盖它。 - 免责声明：我是作者

现在来到您的用例，您可以像这样进行条件样式：（假设样式与答案中给出的示例一致）

import React from "react";
import styles from "./styles.module.css";

const PageX = () => {
  const [submitted,setSubmitted] = React.useState(false);

  const getStyle = () => {
    if (submitted) return styles.showtheresult;
    else return styles.hidetheresult;
  };

  const getButtonStyle = () => {
    if (submitted) return styles["btn-showtheresult"];
    else return styles["btn-hidetheresult"];
  };

  return (
    <div>
      <section className="results">
        <h1 className={getStyle()}>Correct?</h1>
        <h1 className={getStyle()}>Incorrect?</h1>
        <button className={getButtonStyle()} onClick={handleMovClick}>
          An instruction
        </button>
      </section>
    </div>
  );
};

随着您添加更多条件，方法往往会变得更加复杂。这是classnames 模块派上用场。

import styles from "./styles.module.css";
import clsx from "classnames";

const PageX = () => {
  const [submitted,setSubmitted] = React.useState(false);

  const headerStyle = clsx({
    [styles.showtheresult]: submitted,[styles.hidetheresult]: !submitted,});
  const btnStyle = clsx({
    [styles["btn-showtheresult"]]: submitted,[styles["btn-hidetheresult"]]: !submitted,});
  return (
    <div>
      <section className="results">
        <h1 className={headerStyle}>Correct?</h1>
        <h1 className={headerStyle}>Incorrect?</h1>
        <button className={btnStyle} onClick={handleMovClick}>
          An instruction
        </button>
      </section>
    </div>
  );
};

这是一个 CodeSandbox 供您使用：