CODEWITHSUNDEEP
cssreactjsflexbox
meWho
meWho

Reputation: 141

Add space between Icon and text that is rendered in component prop (React)

I have a RightHeadingContainer that is a styled div:

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

it is rendering in my Header component:

 <RightHeadingContainer>{rightHeading}</RightHeadingContainer>

The rightHeading prop is being passed to my 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

In my sliding panel I'm passing an icon 'Member' and some variables. At the moment the icon is right against the text of the first variable and am unsure how to add spacing between them. I've tried using flex but get no results I believe because of the rendering through a prop value. How can I add spacing between the two elements without hardcoding it?

Upvotes: 0

Views: 904

Answers (1)

Andy
Andy

Reputation: 1228

You can either use &nbsp Between the text and the icon or add padding/margin in the icon component

Something like

  <Member colour='white' size='XL' styles={{paddingRight: ‘10px’}} />

Or

  <StyledRightHeadingContainer>
     <Member colour='white' size='XL' />
       &nbsp; {`${selectedAccName}`} {`${selectedAccNumber}`}
  </StyledRightHeadingContainer>

Upvotes: 1

Related Questions