How can I add a normal space between these components?

How can I add a normal space between these components? I don’t like the way of increasing the padding to the right, I tried doing like this way by adding template strings ${“} but it did not work Any suggestion on how to add a normal white space?

Current output:

Expected output:

This is a bold span normal span

index.js
<SpanWrapperBold>${`This is a bold span `}</SpanWrapperBold>
 <SpanWrapper>normal span</SpanWrapper>

SpanWrapper.js
export const SpanWrapperBold = styled.span`
  font-weight: bold;
`;

export const SpanWrapper = styled.span`
  padding: 3px;
`;

Answer

This is a bold span {“u00A0”} normal span

Advertisement

Answer