Question

我有一个按钮，其中包含一个图标和一些文本。我希望此按钮可重用。我也想选择将图标放在文本的左侧还是文本的右侧。我传入了一个道具（“右”或“左”），然后将调整CSS。谁能帮助我使用CSS来交换这两个位置。

export const IconButton = ({icon,text, position}) => {
  return (
    <StyledIconButton className={position}>
      <img src={icon} />
      {text}
    </StyledIconButton>
  );
};

StyledIconButton有一些默认样式，但并不重要。

我正在尝试使用float，但是没有成功。理想情况下，我也避免使用flexbox。

.right {
   img {
    float: left;
    margin-right: 0.375rem;
  }
}
.left {
  img {
    float: right;
    margin-left: 1.5rem;
  }
}

根据要求，我要添加StyledIconButton的样式：

.styledbutton {
  display: flex;
  font-size: 1rem;
  line-height: 2rem;
}

上面的代码实际上不会交换位置。

Answer 1

我认为使用flexbox并切换方向是最简单的方法。您可以了解flexbox here。

但是您可以设置左右类来决定伸缩的方向。

.right {
   flex-direction: row-reverse;
}
.left {
  flex-direction: row;
}

您将在文本和img上分别设置间距和所有其他必需的样式，但这应该可以解决问题

更改按钮文字和按钮图标的位置

1 个答案: