How to use the @rebass/components/emotion function in @rebass/components
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 system from "@rebass/components/emotion";
const Heading = system(
{
is: "h2",
fontSize: 5,
fontWeight: "700",
lineHeight: 1.5,
mt: 4,
mb: 3,
},
"fontFamily",
"color",
"textAlign"
);
Heading.displayName = "Heading";
export default Heading;import system from "@rebass/components/emotion";
const Heading = system(
{
is: "h2",
fontSize: 5,
fontWeight: "700",
lineHeight: 1.5,
mt: 4,
mb: 3
},
"fontFamily",
"color",
"textAlign"
);
Heading.displayName = "Heading";
export default Heading;import system from "@rebass/components/emotion";
const Text = system(
{
m: 0
},
"space",
"color",
"fontFamily",
"fontSize",
"fontWeight",
"textAlign",
"lineHeight"
);
Text.displayName = "Text";
export default Text;import system from "@rebass/components/emotion";
const Container = system(
{
is: "div",
px: 3,
mx: "auto",
maxWidth: 1024
},
"maxWidth"
);
Container.displayName = "Container";
export default Container;import system from "@rebass/components/emotion";
const Container = system(
{
is: "div",
px: 3,
mx: "auto",
maxWidth: 1024
},
"maxWidth"
);
Container.displayName = "Container";
export default Container;import system from "@rebass/components/emotion";
const Text = system(
{
m: 0
},
"space",
"color",
"fontFamily",
"fontSize",
"fontWeight",
"textAlign",
"lineHeight"
);
Text.displayName = "Text";
export default Text;@rebass/components
Create consistent styled-system based React UI components
