如何使用styled-components修改组件内部分文本颜色且不换行

InfoH3是绑定h1标签的样式组件，h1默认是块级（block）元素，特性是独占整行。你基于InfoH3生成的InfoH3Pink会完整继承原组件的默认display属性，所以包裹的“Discover”文本会单独占一行，和后续文本断开。

方案1：修改现有高亮组件的显示模式（改动最小） #

直接在InfoH3Pink的样式里加行内显示声明，不需要调整业务代码结构：

// 样式文件中修改InfoH3Pink定义
export const InfoH3Pink = styled(InfoH3)`
  color: #FA8072;
  display: inline; /* 改为行内元素，和周边文本同排 */
`

业务代码里去掉标签前后多余的空格，避免出现不必要的文本间隙即可：

<InfoH3><InfoH3Pink>Discover</InfoH3Pink> new subscriptions for whatever you'd like.</InfoH3>

方案2：基于行内原生标签创建高亮组件（语义更合适） #

如果这个高亮组件仅用来修改局部文本颜色，不需要继承h1的块级属性，直接基于原生行内标签span创建组件即可，天然不会触发换行：

// 样式文件中直接基于span创建高亮文本组件
export const InfoH3Pink = styled.span`
  color: #FA8072;
`

业务代码写法和上面一致，span作为行内元素会自动继承父级h1的字体、字号、行高等样式，和其余文本正常排在同一行，不会出现断行问题。

内容的提问来源于stack exchange，提问作者Jae Hyun Kim