在组件 prop (React) 中呈现的图标和文本之间添加空间答案

【问题标题】：Add space between Icon and text that is rendered in component prop (React)在组件 prop (React) 中呈现的图标和文本之间添加空间
【发布时间】：2022-11-23 11:52:01
【问题描述】：

我有一个 RightHeadingContainer，它是一个样式化的 div：

const RightHeadingContainer = styled.div({
  color: 'white',
  alignSelf: 'center',
  fontSize: 17,
  fontWeight: 400,
  paddingLeft: '56px',
  paddingRight: '56px',
  justifyContent: 'flex-end'
})

它在我的 Header 组件中呈现：

 <RightHeadingContainer>{rightHeading}</RightHeadingContainer>

rightHeading 道具被传递到我的 SlidingPanel：

const StyledRightHeadingContainer = styled.div({
  fontWeight: 'bold',
  display: 'inline-flex',
  alignItems: 'center'
})

const Panel = ({ selectedAccName, selectedAccNumber }) => {
  return (
    <SlidingPanel
      rightHeading={
        <StyledRightHeadingContainer>
          <Member colour='white' size='XL' />
          {`${selectedAccName}`} {`${selectedAccNumber}`}
        </StyledRightHeadingContainer>
      } />

  )
}

export default Panel

在我的滑动面板中，我传递了一个图标“成员”和一些变量。目前，该图标正对着第一个变量的文本，我不确定如何在它们之间添加间距。我试过使用 flex 但没有得到我相信的结果，因为通过道具值进行渲染。如何在不硬编码的情况下在两个元素之间添加间距？

【问题讨论】：

标签： css reactjs flexbox

【解决方案1】：

您可以在文本和图标之间使用 &nbsp 或在图标组件中添加填充/边距

【讨论】：