Mantine框架下能否通过CSS伪类实现按钮点击后隐藏并显示标题

仅靠CSS交互类伪类无法实现点击后永久切换状态的需求，你现有代码的问题和相关原理如下：

• :active 伪类仅在鼠标按住元素的瞬间生效，松开鼠标就会立刻回退到原状态，这就是你当前按住按钮才临时隐藏、松开就复原的根本原因。CSS没有提供通用的「记录元素被点击过」的永久状态伪类，:visited 仅对<a>标签生效，且有严格的样式权限限制，根本无法用来控制其他元素的显隐效果。
• 你写的CSS-in-JS嵌套语法存在错误：在&:active块内直接写title: {}不会被编译为合法的CSS选择器，只会被当成无效属性丢弃。就算你写对兄弟选择器语法（比如&:active ~ .${classes.title}），受限于:active的临时生效特性，也做不到点击后永久切换效果。
• 代码里还有一处类名绑定错误：你给TextInput传入的className="title"是原生字符串类名，没有绑定createStyles生成的哈希化类名，就算选择器逻辑正确也匹配不到目标元素。

如果坚持要用纯CSS实现（完全不写React状态逻辑），可以借助表单元素的:checked状态做hack实现——checkbox/radio的选中状态是点击后永久保留的，不属于临时交互伪类：

1. 新增一个隐藏的checkbox，将保存按钮放在<label>标签内和checkbox绑定
2. 点击按钮（本质是点击label）时会自动切换checkbox的选中态
3. 基于:checked状态用兄弟选择器控制按钮隐藏、姓名展示、输入框隐藏

但这种写法属于纯CSS奇技淫巧，在React项目里可维护性极差，你代码中注释掉的show状态控制显隐才是符合框架设计的标准实现，逻辑更直观、调试成本更低。

内容的提问来源于stack exchange，提问作者meWho