React: Можем ли мы расширить стилевые компоненты с помощью реквизита?

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;
`;

Есть ли способ добиться этого "реквизита", так же, как мы можем использовать "attrs" в styled-component?

Answer 1

Примерно так может работать:

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