React+TypeScript项目中用CSS实现按钮点击切换箭头显示效果

步骤1：添加状态管理 #

在组件中用useState跟踪当前激活的按钮类型，以此控制箭头的显示位置：

import { useState } from 'react';
import Button from '@mui/material/Button';
import TextFieldsIcon from '@mui/icons-material/TextFields';
import AddPhotoAlternateIcon from '@mui/icons-material/AddPhotoAlternate';

const YourComponent = () => {
  // 初始激活第一个按钮，对应'textField'类型
  const [activeButton, setActiveButton] = useState<string>('textField');

  const onFieldAdd = (fieldType: string) => {
    // 点击按钮时更新激活状态
    setActiveButton(fieldType);
    // 保留原有业务逻辑
    // ...
  };

  return (
    <div className="button-container">
      <Button
        className={`text-white font-nunito text ${activeButton === 'textField' ? 'active' : ''}`}
        onClick={() => onFieldAdd('textField')}
      >
        <TextFieldsIcon />
        <p>&nbsp;&nbsp;&nbsp;Text Box</p>
      </Button>
      <Button
        className={`text-white font-nunito text mx-2 pr-15 ${activeButton === 'imageField' ? 'active' : ''}`}
        onClick={() => onFieldAdd('imageField')}
        disabled={!!formId}
      >
        <AddPhotoAlternateIcon />
        <p>&nbsp;&nbsp;&nbsp;Image</p>
      </Button>
    </div>
  );
};

export default YourComponent;

步骤2：编写CSS样式 #

通过active类的伪元素绘制箭头，匹配示意图的显示效果：

.button-container {
  position: relative;
  /* 根据实际布局调整容器样式 */
}

/* 给按钮设置相对定位，确保箭头能基于按钮定位 */
.button-container Button {
  position: relative;
}

/* 激活按钮的箭头样式 */
.button-container .active::after {
  content: '';
  position: absolute;
  /* 调整箭头位置，示例为按钮下方居中 */
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  /* 绘制三角形箭头，颜色可按需修改 */
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
}

效果说明 #

• 点击按钮时，setActiveButton会更新当前激活的按钮类型，动态为对应按钮添加active类
• 箭头通过CSS伪元素绘制，仅在带有active类的按钮上显示，切换点击时箭头会自动转移到新激活的按钮
• 箭头的位置、大小、颜色可根据实际需求调整CSS参数

内容的提问来源于stack exchange，提问作者Jennifer De Goede