JSS Styled
Styled primitives for JSS.
This project has experimental status, so API may change
Usage
Styled function
Note, that styles applies to the page on the function call, so it's better to use injectStyled in most cases
import Styled from 'jss-styled' const styled = const App = <styled.app> <styled.h1>Hello World!</styled.h1> <styled.button ="red">click me!</styled.button> </styled.app>
Styled function With custom jss setting
import jss from 'jss'import preset from 'jss-preset-default' import prepareStyled from 'jss-styled' const jss = jss const Styled = ...
injectStyled
This wrapper applies styles only on the first component mount.
import injectStyled from 'jss-styled' const styles = h1: fontSize: '30px' app: padding: 10px button: color const App = styled <styled.app> <styled.h1>Hello World!</styled.h1> <styled.button ="red">click me!</styled.button> </styled.app> stylesApp
With custom Styled function
import jss from 'jss'import preset from 'jss-preset-default' import injectStyled prepareStyled from 'jss-styled' const jss = jss const Styled = const styles = h1: fontSize: '30px' app: padding: 10px button: color const App = styled <styled.app> <styled.h1>Hello World!</styled.h1> <styled.button ="red">click me!</styled.button> </styled.app> styles StyledApp
StyledComponent customization
import StyledApp from './App' const customStyles = app: padding: 30px const CustomApp = // App will reassign App component styles for .app <App = />