Global - Documentation

Methods

styled(base, styleFn) → {function}

Source:

styletron-react/src/styled.js, line 46

Helper function to create styled element components

Examples

import {styled} from 'styletron-react';

const Panel = styled('div', {
  backgroundColor: 'lightblue',
  fontSize: '12px'
});

<Panel>Hello World</Panel>

import {styled} from 'styletron-react';

const Panel = styled('div', (props) => ({
  backgroundColor: props.alert ? 'orange' : 'lightblue',
  fontSize: '12px'
}));

<Panel alert>Danger!</Panel>

import {styled} from 'styletron-react';

const DeluxePanel = styled(Panel, (props) => ({
  backgroundColor: props.alert ? 'firebrick' : 'rebeccapurple',
  color: 'white',
  boxShadow: '3px 3px 3px darkgray'
}));

<DeluxePanel>Bonjour Monde</DeluxePanel>

Parameters:

Name	Type	Description
`base`	String \| function	Tag name or styled element component
`styleFn`	function \| object	Style object or function that returns a style object

Returns:

Styled element component

Type: function

styled(name, styles) → {function}

Source:

styletron-inferno/src/styled.js, line 53

Helper function to create styled components

Examples

import { styled } from 'styletron-inferno';

const Panel = styled('div', {
  backgroundColor: 'lightblue',
  fontSize: '12px'
});

<Panel>Hello World</Panel>

import { styled } from 'styletron-inferno';

const Panel = styled('div', (props) => ({
  backgroundColor: props.alert ? 'orange' : 'lightblue',
  fontSize: '12px'
}));

<Panel alert>Danger!</Panel>

import { styled } from 'styletron-inferno';

const DeluxePanel = styled(Panel, (props) => ({
  backgroundColor: props.alert ? 'red' : 'lime',
  boxShadow: '3px 3px 3px darkgray',
  color: 'white'
}));

<DeluxePanel>Bonjour Monde</DeluxePanel>

Parameters:

Name	Type	Description
`name`	string \| function	Tag name or component function/class
`styles`	function \| object	Style object or function that returns a style object

Returns:

Styled component

Type: function

styled(base, styleFn) → {function}

Source:

styletron-preact/src/styled.js, line 43

Helper function to create styled element components

Examples

import {styled} from 'styletron-preact';

const Panel = styled('div', {
  backgroundColor: 'lightblue',
  fontSize: '12px'
});

<Panel>Hello World</Panel>

import {styled} from 'styletron-preact';

const Panel = styled('div', (props) => ({
  backgroundColor: props.alert ? 'orange' : 'lightblue',
  fontSize: '12px'
}));

<Panel alert>Danger!</Panel>

import {styled} from 'styletron-preact';

const DeluxePanel = styled(Panel, (props) => ({
  backgroundColor: props.alert ? 'firebrick' : 'rebeccapurple',
  color: 'white',
  boxShadow: '3px 3px 3px darkgray'
}));

<DeluxePanel>Bonjour Monde</DeluxePanel>

Parameters:

Name	Type	Description
`base`	String \| function	Tag name or styled element component
`styleFn`	function \| object	Style object or function that returns a style object

Returns:

Styled element component

Type: function