在 React 中使用样式组件在图标旁边显示文本答案

【问题标题】：Displaying text next to an icon using styled components in React在 React 中使用样式组件在图标旁边显示文本
【发布时间】：2021-07-26 22:25:32
【问题描述】：

React 新手并使用样式化组件，但我正在构建一个标题组件，它基本上有两个黑条 - 顶部栏 (StyledApplicationBanner) 包含徽标，然后 (StyledBackBar) 包含返回箭头（SVG）-我当前的代码在定位方面具有我想要的一切，但我不确定如何使我的 <p>``back</p> 文本与箭头对齐？任何人都可以提出实现这一目标的起点吗？

import styled from "styled-components";
import icon from "./myicons-icon-light.png";
import arrow from "./arrow-left.svg";

const StyledApplicationBanner = styled.header`
  background: black;
  height: 64px;
  width: 100%;
  border-bottom: 1px solid rgb(151, 153, 155);
`;

const StyledBackBar = styled.div`
background: black;  
height: 48px;
width: 100%;
color: white;

p {
  color: white;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 16px;
  text-transform: uppercase;
}
`;

const Icon = styled.img`
  height: 22px;
  width: 116px;
  margin-top: 21px;
  margin-left: 96px;
`;

const Arrow = styled.img`
  height: 32px;
  width: 32px;
  margin-top: 8px;
  margin-left: 88px;
`
  return (

      <StyledApplicationBanner>
        <Icon src={icon} alt="Icon" />
      </StyledApplicationBanner>
      <StyledBackBar>
        <Arrow src={arrow} alt="Back arrow" />
        <p>Back</p>
      </StyledBackBar>

  );
};



export default ApplicationHeader;

【问题讨论】：

您是否尝试过将 display: flex; 添加到 StyledBackBar 中，理论上这会使这两个项目进入一行

标签： css reactjs svg styled-components

【解决方案1】：

将display: flex 与align-items: center 一起使用：

const StyledBackArrow = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
`;

...
<StyledBackArrow>
  <img />
  <span>Back</span>
</StyledBackArrow>
...

div {
  display: flex;
  flex-direction: row;
  align-items: center;
}

img {
  margin-right: 10px;
}

<div>
  <img src="https://www.flaticon.com/svg/vstatic/svg/271/271218.svg?token=exp=1620141549~hmac=67502fda00fa10153b12a47f64e7ed81" width="32" />
  <span>Back</span>
</div>

【讨论】：