在 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

問題：如果我需要更多道具怎么辦？

我知道我可以擴展 rebass components ，但是，這似乎將某些 CSS 屬性硬編碼到組件中。 例如，如果我的 Box 總是紫色，我可以創建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和styled-system

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支持的所有現成屬性