React Styled Components实现响应式箭头图标切换技术问询

你之前的写法错误在于，FaArrowRight和FaArrowCircleDown是React组件，并非图片URL，不能通过content: url()直接引入，所以无法生效。以下是两种正确的实现方案：

方法一：通过Styled Components控制图标显隐 #

这种纯CSS方案简洁高效，利用媒体查询直接控制两个图标的显示与隐藏：

import { FaArrowRight, FaArrowCircleDown } from 'react-icons/fa';
import styled from 'styled-components';

// 定义图标容器，封装响应式逻辑
const IconContainer = styled.div`
  .desktop-icon {
    display: inline-block;
  }
  .mobile-icon {
    display: none;
  }

  @media screen and (max-width: 768px) {
    .desktop-icon {
      display: none;
    }
    .mobile-icon {
      display: inline-block;
    }
  }
`;

// 在组件中使用
<Column2>
  <ContentWrapper>
    <MiniIcons blueText={false}>
      <IconContainer>
        <FaArrowRight className="desktop-icon" />
        <FaArrowCircleDown className="mobile-icon" />
      </IconContainer>
    </MiniIcons>
  </ContentWrapper>
</Column2>

方法二：封装独立的响应式图标组件 #

如果需要复用这个响应式图标，可以单独封装一个组件：

import { FaArrowRight, FaArrowCircleDown } from 'react-icons/fa';
import styled from 'styled-components';

const ResponsiveArrow = styled.div`
  width: 24px; // 根据需求自定义尺寸
  height: 24px;

  svg {
    width: 100%;
    height: 100%;
  }

  .desktop-arrow {
    display: block;
  }
  .mobile-arrow {
    display: none;
  }

  @media screen and (max-width: 768px) {
    .desktop-arrow {
      display: none;
    }
    .mobile-arrow {
      display: block;
    }
  }
`;

// 使用封装好的组件
<Column2>
  <ContentWrapper>
    <MiniIcons blueText={false}>
      <ResponsiveArrow>
        <FaArrowRight className="desktop-arrow" />
        <FaArrowCircleDown className="mobile-arrow" />
      </ResponsiveArrow>
    </MiniIcons>
  </ContentWrapper>
</Column2>

补充说明 #

• 可以直接给svg标签添加样式，或者在Styled Components中扩展颜色、间距等属性。
• 纯CSS方案比JS监听窗口尺寸的方式更高效，避免不必要的组件重渲染。

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