Vite中使用styled-components构建组件时出现<text>标签未识别报错

问题原因 #

你遇到的警告是因为HTML中不存在<text>原生标签，<text>是SVG规范专属的标签。当你使用styled.text时，styled-components会创建对应原生标签的样式组件，React尝试渲染这个不存在的HTML标签，因此抛出警告。

解决方案 #

HTML中用于展示文本的标准标签是<span>（行内文本）或<p>（块级文本），将styled.text替换为对应的HTML标签即可解决问题：

修改后的组件代码 #

import styled from 'styled-components';

function TextView({ children, color, fontSize, fontWeight }) {
  // 根据布局需求选择 styled.span 或 styled.p
  const StyledText = styled.span`
    color: ${color};
    font-size: ${fontSize};
    font-weight: ${fontWeight};
  `;

  return <StyledText>{children}</StyledText>;
}

TextView.defaultProps = {
  color: '#fff',
  fontSize: '1em',
  fontWeight: 'normal',
};

export default TextView;

补充说明 #

• 若你的场景是在SVG内部使用文本，需确保组件嵌套在<svg>标签内，或明确指定SVG的text标签：

  const StyledSVGText = styled.svg.text`
    fill: ${color};
    font-size: ${fontSize};
  `;
  

• styled-components的styled.[tag]语法仅针对HTML/SVG原生标签生效，不存在的HTML标签会触发React的未知标签警告，和组件名大小写无关。

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