How to use @rebass/components - 10 common examples
To help you get started, we’ve selected a few @rebass/components examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
hasura / gatsby-gitbook-starter / src / components / mdxComponents / pre.js View on Github 
import system from "@rebass/components/emotion";
const Pre = system(
{
is: "pre",
fontSize: 1,
// fontFamily: "mono",
m: 0
},
{
overflow: "auto",
},
"fontFamily",
"space",
"color"
);
Pre.displayName = "Pre";
export default Pre;import system from "@rebass/components/emotion";
const Pre = system(
{
is: "pre",
fontSize: 1,
// fontFamily: "mono",
m: 0
},
{
overflow: "auto",
fontSize: 15,
},
"fontFamily",
"space",
"color",
);
Pre.displayName = "Pre";import sys from '@rebass/components'
export const Text = sys({
m: 0
},
'space',
'color',
'fontFamily',
'fontSize',
'fontWeight',
'textAlign',
'lineHeight'
)
Text.displayName = 'Text'
export default Textimport sys from '@rebass/components'
import Heading from './Heading'
export const Subhead = sys({
is: 'h3',
extend: Heading,
fontSize: 4
})
Subhead.displayName = 'Subhead'
export default Subheadimport sys from '@rebass/components'
import { Box } from '@rebass/grid'
export const Column = sys({
extend: Box,
px: 3,
mb: 4,
flex: '1 1 auto'
}, 'flex')
Column.displayName = 'Column'
export default Column@rebass/components
Create consistent styled-system based React UI components
