React：能否通过Props扩展styled-components？扩展时可传Props吗？

嘿，你这个需求提得很实用！其实在styled-components里，完全可以实现你想要的“扩展现有组件同时传递props、集中管理样式”的效果，而且不需要依赖虚构的props()方法——官方已经提供了现成的方案，就是你已经在使用的attrs()！

核心思路：attrs()不仅能传HTML属性，还能传自定义props #

你之前用styled(Foo).attrs({ tabIndex: 0 })来设置HTML原生属性，但其实attrs()的能力远不止于此：它可以传递任何自定义props给你的基础组件（也就是例子里的Foo），和你虚构的props()写法效果完全一致。

静态传递props的示例 #

直接在attrs()里传入你要传递的props即可，这是完全可运行的写法：

import styled from 'styled-components';

// 基础组件，接收height prop
const Foo = styled.div`
  height: ${({ height }) => `${height || '12'}px`};
`;

// 扩展Foo并传递height prop
const Baz = styled(Foo).attrs({ height: '14' })`
  color: red;
`;

这样Baz组件在渲染时，会自动把height: '14'传递给Foo，最终渲染出高度14px、文字红色的div。

动态传递props的示例 #

如果需要根据外部传入的props来动态设置基础组件的props，还可以给attrs()传入一个函数：

const Baz = styled(Foo).attrs((props) => ({
  // 优先使用外部传入的customHeight，默认值为14
  height: props.customHeight || '14'
}))`
  color: red;
`;

// 使用时可以自定义高度
<Baz customHeight="20" />

额外场景：渲染时直接传递props #

如果不需要把props固化在styled组件里，而是希望在使用组件时灵活传递，直接在组件标签上传入即可：

<Baz height="14" />

不过这种方式适合灵活调整的场景，如果你想集中管理样式相关的props，还是用attrs()的方式更贴合需求。

完整可运行示例 #

import styled from 'styled-components';

// 基础样式组件
const Foo = styled.div`
  height: ${({ height }) => `${height || '12'}px`};
  border: 1px solid #ddd;
  padding: 8px;
`;

// 扩展组件并传递默认props
const Baz = styled(Foo).attrs({ height: '14' })`
  color: #ff4444;
  background-color: #fff5f5;
`;

// 在应用中使用
function App() {
  return (
    <div style={{ gap: '16px', display: 'flex' }}>
      <Foo>基础Foo组件（高度12px）</Foo>
      <Baz>扩展后的Baz组件（高度14px）</Baz>
      <Baz height="20">自定义高度的Baz组件（高度20px）</Baz>
    </div>
  );
}

export default App;

总结一下：你想要的“扩展组件同时传递props”的功能，styled-components的attrs()完全可以胜任，它既能静态传递固定props，也能动态根据外部props调整，完美实现集中管理样式相关对象的需求。

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