如何在这些组件之间添加正常空间？答案

【问题标题】：How can I add a normal space between these components?如何在这些组件之间添加正常空间？
【发布时间】：2021-04-05 18:22:20
【问题描述】：

如何在这些组件之间添加一个正常的空间？我不喜欢向右增加填充的方式，我尝试通过添加模板字符串 ${``} 来这样做，但它没有用有关如何添加正常空白的任何建议？

当前输出：

预期输出：

这是一个粗体范围正常范围

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;
`;

【问题讨论】：

这应该为你做：<SpanWrapperBold>This is a bold span</SpanWrapperBold>{" "}<SpanWrapper>normal span</SpanWrapper>

标签： javascript html css styled-components

【解决方案1】：

这是一个粗体跨度 {"\u00A0"} 正常跨度

【讨论】：