React：我们可以用 props 扩展样式组件吗？

Question

我们可以在传递道具的同时扩展现有的样式组件吗？这有助于集中所有样式相关的对象。下面是一个（发明的）例子：


const Foo = styled.div`
  height: ${({ height }) => `${height && '12'}px`};
`;

// Currently possible: 
const Bar= styled(Foo).attrs({ tabIndex: 0 })`
  color: red;
`;

// Invented!! Does not work
const Baz = styled(Foo).props({ height: '14' })`
  color: red;
`;

有没有办法实现这个"props"，就像我们可以在 styled-components 中使用 "attrs" 一样？

Answer 1

类似这样的方法可行：

const Baz = styled((props) => <Foo height="14"  {...props} />)

React：我们可以用 props 扩展样式组件吗？

React: Can we extend styled-components with props?

reactjs

styled-components