Расширение компонентов в rebass.js?

Question

Начинающий здесь. На данный момент я могу использовать Box вот так:

<Box
  p={5}
  fontSize={4}
  width={[ 1, 1, 1/2 ]}
  color='white'
  bg='magenta'>
  Box
</Box>

и дать ему определенные реквизиты, как сказано на сайте:

All margin and padding props
width: responsive width
fontSize: responsive font size
color: text color
bg: background color
flex: CSS flex shorthand property
order: CSS order property
alignSelf: CSS align-self property

Вопрос: Что делать, если мне нужно больше реквизита?

Я знаю, что могу расширить компоненты ребасса, однако это, кажется, жестко закодирует определенные свойства CSS в компоненте. Например, если моя коробка всегда фиолетовая, я могу создать PurpleBox и сохранить цвет там. Или на их сайте есть этот пример:

const Container = props =>
  <Box
    {...props}
    mx='auto'
    css={{
      maxWidth: '1024px'
    }}
  />

Справедливо! Что, что мне нужно для создания компонента, скажем, PositionedBox который получает дополнительный position опора для относительного или абсолютного позиционирования?

Я хотел бы использовать это так:

<Box
  p={5}
  fontSize={4}
  width={[ 1, 1, 1/2 ]}
  color='white'
  bg='magenta'
  position='abs'>
  Box
</Box>

Это возможно? Не уверен, как я мог сделать это.

Answer 1

Вы могли бы использовать styled-components а также

      import styled from "styled-components";
import { position } from "styled-system";

// through interpolation

const StyledBox = styled(Box)`
 // some properties
    ${position}
`;

// passing as a single property
const StyledBox = styled(Box)(position);

передача нескольких свойств

      import { compose, property1, property2, ... } from "styled-system";

import StyledBox = styled(Box)(compose(property1, property2, ....));

это расширит все свойства позиции, поддерживаемые системой стилей. список всех готовых свойств, поддерживаемых styled-system здесь