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

Posted 2023-03-15

【中文标题】在 React 中使用样式组件在图标旁边显示文本

【英文标题】：Displaying text next to an icon using styled components in 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  />
      </StyledApplicationBanner>
      <StyledBackBar>
        <Arrow src=arrow  />
        <p>Back</p>
      </StyledBackBar>

  );
;



export default ApplicationHeader;

【问题讨论】：

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

【参考方案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"  />
  <span>Back</span>
</div>