ReactJs中实现按钮Hover时显示boxShadow的方法

内联样式没法直接用:hover伪类，所以可以用下面两种方式实现需求：

方法一：使用CSS类（推荐，更易维护） #

把样式抽离到CSS文件里，通过伪类控制hover状态的阴影：

1. 编写CSS样式：

.custom-action-btn {
  float: right;
  margin-bottom: 15px;
  margin-right: 30px;
  background-color: #06ac06;
  border: none;
  box-shadow: none; /* 默认隐藏阴影 */
  transition: box-shadow 0.3s ease; /* 可选：加过渡动画让阴影变化更平滑 */
}

.custom-action-btn:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

2. 修改按钮代码，添加类名：

<CButton className="custom-action-btn">
  按钮内容
</CButton>

方法二：使用React状态控制（适合动态场景） #

通过组件状态监听鼠标进入/离开事件，动态切换阴影样式：

import { useState } from 'react';

// 在你的组件内部
const [isBtnHovered, setIsBtnHovered] = useState(false);

return (
  <CButton
    style={{
      float: 'right',
      marginBottom: '15px',
      marginRight: '30px',
      backgroundColor: '#06ac06',
      border: 'none',
      // 根据hover状态切换阴影
      boxShadow: isBtnHovered 
        ? '0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19)' 
        : 'none',
      transition: 'box-shadow 0.3s ease' // 可选过渡动画
    }}
    onMouseEnter={() => setIsBtnHovered(true)}
    onMouseLeave={() => setIsBtnHovered(false)}
  >
    按钮内容
  </CButton>
);

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