我有一个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

在我的滑动面板中，我传递了一个图标'Member'和一些变量。此时图标正好对着第一个变量的文本，我不确定如何在它们之间添加间距。我尝试过使用flex，但没有得到任何结果，我相信这是因为通过prop值进行渲染。我如何在两个元素之间添加间距而不对其进行硬编码？