如何禁用Mantine按钮的点击动画效果？

有两种简单的方式可以关掉Mantine按钮点击时的位移动画：

方法一：利用组件内置属性 #

直接通过transitionProps属性将过渡时长设为0，就能完全禁用点击动画：

import { Button } from '@mantine/core';

function App() {
  return (
    <Button transitionProps={{ duration: 0 }}>无点击动画按钮</Button>
  );
}

方法二：自定义CSS覆盖默认样式 #

如果需要全局禁用所有按钮的点击动画，在全局样式文件里添加以下代码：

.mantine-Button-root:active {
  transform: none;
  transition: none;
}

要是只想给单个按钮禁用动画，就给按钮加自定义类名，再写局部样式：

import { Button } from '@mantine/core';
import classes from './MyButton.module.css';

function App() {
  return (
    <Button className={classes.noClickAnimation}>无点击动画按钮</Button>
  );
}

对应的模块CSS：

.noClickAnimation:active {
  transform: none;
  transition: none;
}

原理很简单：Mantine按钮的点击位移效果是通过:active伪类的transform属性和过渡动画实现的，上面两种方法要么直接关闭组件的过渡效果，要么覆盖掉默认的样式规则。

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