styled-components箭头按钮无法按props设置左右定位求助

DevOps 小满

2026-7-27

问题解决：箭头按钮按props定位左侧/右侧

你的问题核心是props传递对象错误——你把direction传给了MUI图标组件，但负责控制定位样式的是Arrow这个styled组件，它根本没拿到需要的props，所以样式不生效。

修正步骤：

将direction props直接传给<Arrow>组件，而非内部的图标
优化样式逻辑，避免未匹配方向时left/right属性为undefined的情况（用三元表达式设置默认值）

修正后的完整代码

import styled from "styled-components";
import ArrowBackIosSharpIcon from '@mui/icons-material/ArrowBackIosSharp';
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';

const Container = styled.div`
  width: 100%;
  height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;
  background-color: #fff6a9;
`;

const Arrow = styled.div`
  width: 50px;
  height: 50px;
  background-color: #fff7f7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  cursor: pointer;
  opacity: 0.5;
  z-index: 2;

  // 用三元表达式明确处理两种情况，避免属性未定义
  left: ${(props) => props.direction === "left" ? "10px" : "auto"};
  right: ${(props) => props.direction === "right" ? "10px" : "auto"};
`;

const Slider = () => {
    return (
        <Container>
            {/* 把direction传给Arrow组件 */}
            <Arrow direction="left">
                <ArrowBackIosSharpIcon />
            </Arrow>
            <Arrow direction="right">
                <ArrowForwardIosSharpIcon />
            </Arrow>
        </Container>
    );
}

export default Slider;