在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和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 这里支持的所有开箱即用属性的列表。