Rebass is an unopinionated and extensible set of React primitives.
This library allows you to easily add your own style functions to the Rebass UI primitives.
yarn add rebass rebass-extend
// src/lib/primitives.js
import { extend } from "rebass-extend";
import { display, minHeight, textAlign, fontStyle } from "styled-system";
export const { Box, Flex, Text, Heading, Button, Link, Image, Card } = extend({
Box: [display, minHeight, textAlign],
Text: [fontStyle]
});
The display
style function is added to Box
, and all the components that extend
it, like Card
!
// src/components/Badge.js
import { Card } from "src/lib/primitives";
const Badge = props => (
<Card
color="white"
bg="blue"
px={3}
py={1}
borderRadius={9999}
display="inline-block"
{...props}
/>
);
export default Badge;