如何为FunctionComponent的宿主组件应用样式（无需额外属性）？

问题根源 #

你当前的Card组件直接返回内部div，用styled-components包装时，样式是挂载在Card这个函数组件本身的，但React函数组件不会自动将外部传入的类名传递给内部DOM元素，导致max-width样式无法生效。

可行解决方案 #

方案1：让Card接收标准className属性并传给根DOM元素 #

className是React组件的标准props，不属于额外自定义属性，只需显式传递给根div即可：

const Card: FunctionComponent<{ className?: string }> = ({ className }) => {
  return (
    <div 
      className={className} 
      style={{ padding: 8, border: '1px solid black' }}
    >
      <div>This is a test</div>
    </div>
  );
};

const StyledCard = styled(Card)`
  max-width: 10px;
`;

此时styled-components生成的样式类名会被正确应用到根div上，max-width限制就能生效。

方案2：直接用styled-components定义基础Card组件 #

从源头使用styled-components创建Card，后续扩展样式无需额外属性，直接利用样式继承特性：

// 基础Card组件
const Card = styled.div`
  padding: 8px;
  border: 1px solid black;
`;

// 限制宽度的Card变体
const StyledCard = styled(Card)`
  max-width: 10px;
`;

这种方式完全不需要额外属性，直接通过styled-components的语法就能实现样式扩展。

方案3：用原生CSS类控制宽度 #

如果不想依赖styled-components，给Card根元素预留类名拼接位置，外部通过原生CSS控制：

const Card: FunctionComponent<{ className?: string }> = ({ className }) => {
  return (
    <div 
      className={`card-base ${className || ''}`} 
      style={{ padding: 8, border: '1px solid black' }}
    >
      <div>This is a test</div>
    </div>
  );
};

然后在全局CSS中定义窄宽度样式：

.card-narrow {
  max-width: 10px;
}

使用时直接传入类名：<Card className="card-narrow" />

核心逻辑 #

React函数组件不会自动处理className属性，必须手动将该props传递给内部的真实DOM元素，外部样式才能作用到组件的根节点上。无论使用styled-components还是原生CSS，本质都是让样式类名能附着到目标DOM元素上。

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