1

初学者在这里。截至目前，我可以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 属性硬编码到组件中。例如，如果我的盒子总是紫色的，我可以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>

这可能吗？不知道我怎么能做到这一点。

4

1 回答 1

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

于 2021-05-18T09:57:23.847 回答