DEPRECATED: This package has been renamed and moved to @rebass/components
system-components
Create consistent design-system-driven React UI components
Built with styled-system, with support for styled-components & emotion
// creates a Box with default props tied to your themeconst Box =
Or, to use with emotion:
Usage
To create a styled-component with default props that hook into styled-system props, pass a plain object as the first argument to the system
function.
const Card =
The system function will automatically apply styled-system functions
to the underlying styled-component based on the keys of the defaultProps
object.
System components also add prop type definitions and remove style props from the underlying HTML element.
See the styled-system docs for a complete list of the available style functions.
Add style props without defaultProps
System components can also be created with styled-system props without defining defaultProps
.
const Box =
This allows for style props to be passed to the component instance:
<Box = = = ='blue'/>
Using custom functions
Custom style functions can be passed as an argument.
const Box =
Changing the underlying HTML element
System components default to using a <div>
as the HTML element.
To change the HTML element use the is
prop.
const Heading =
Since is
is a prop, it can also be passed to the element when used.
This is useful for one-off changes to ensure semantic markup.
<Heading is='h1'> Hello</Heading>
Extending components
To extend another component, set it as the default is
prop in your component definition, or pass it as a prop to the component instance.
const Text = const Bold =
CSS prop
To add one-off custom CSS to any system-component, use the css
prop.
<Heading css='opacity:0.75;'> Hello</Heading>
Using with other CSS-in-JS libraries
The base System
class can be used to create a system-components function for any CSS-in-JS library.
const system = ...args