我之前也踩过这个坑！Styled-components虽然号称支持所有CSS语法，但在line-height的类型处理上确实有个容易混淆的点——这也是导致你遇到错误的核心原因。

为什么会报错？ #

Styled-components对部分CSS属性做了类型校验，line-height就是其中之一：

• 当你传入无单位的数字（比如1.5），它会被解析为相对于当前元素font-size的倍数（这是CSS的标准行为），完全合法。
• 但如果你想使用rem、%这类带单位的数值，必须以字符串形式传入，直接写数字+单位会被JS识别为无效语法，触发类型错误。

解决方法，分两种场景： #

1. 优先推荐：用无单位数字实现相对行高

这是最稳妥的相对方式，既不会出现截断问题，也完全符合Styled-components的要求：

const StyledText = styled.div`
  font-size: 16px;
  line-height: 1.5; /* 行高自动是16px * 1.5 = 24px，完美适配字体大小 */
`;

这种写法能保证行高始终和字体大小成比例，从根源避免文字被截断的问题。

2. 必须用rem/%等带单位的情况

如果你的需求确实需要固定单位的行高，分两种写法处理：

• 模板字符串语法：直接正常书写带单位的CSS值即可，不需要额外处理：

  const StyledParagraph = styled.p`
    font-size: 1rem;
    line-height: 1.8rem; /* 直接写，模板字符串会正确解析这个CSS值 */
  `;
  

• 对象语法（配合css helper）：把带单位的值包裹成字符串：

  import { css } from 'styled-components';
  
  const textStyles = css({
    fontSize: '1rem',
    lineHeight: '1.8rem' // 字符串形式，避免类型错误
  });
  

额外提醒 #

如果你之前遇到文字截断，大概率是因为行高设置得小于字体大小。不管用哪种方式，确保line-height的值大于等于当前元素的font-size（无单位的话就是大于等于1），就能避免截断问题。

内容的提问来源于stack exchange，提问作者Eskel