Styled Components on top of JSS
Styled-JSS implements a styled-primitives interface on top of JSS. Its API is similar to styled-components but thanks to the JSS core, it supports all features and plugins JSS does. For e.g. you can use full JSON Syntax inside.
Try it out on playground.
Default styled function
const Button = fontSize: 12 propsthemetextColor // You can also use curried interface this way.const div = const Container = // Composition.const PrimaryButton = color: 'red' // Composition with unstyled React Components too.const Button = color: 'blue' // Component Selectors.const ButtonContainer = `& `: color: 'green'
Theming
styled-jss
has out of the box support for theme customization with the unified theming package.
const Button = margin color: themecolor backgroundColor: themebackgroundColor const themes = light: color: 'black' backgroundColor: 'yellow' const App = <ThemeProvider theme=themeslight> <Button margin=20>This is themed Button</Button> </ThemeProvider>
Composable styles
Example on the CodeSandbox
You can compose your style-objects and style-functions.
Let's say this is our mods.js:
const theme = color: themecolorsprimary backgroundColor: themecolorssecondary const font = font: weight: bold ? 'bold' : 'normal' family: 'Arial' const size = s: fontSize: 12 lineHeight: 12 m: fontSize: 16 lineHeight: 15 size const rounded = rounded && borderRadius: 5
Now we can mix them to our Button Component:
const Button = border: 0 padding: 5 10 display: 'inline-block' theme font size rounded
And Usage:
const theme = dark: colors: primary: 'white' secondary: 'purple' <ThemeProvider theme=themedark> <Button>normal button</Button> <Button bold>bold button</Button> <Button size="s">small button</Button> <Button rounded>rounded button</Button> </ThemeProvider>
Base Style Sheet
Using base Style Sheet we can reuse classes in the render function and inside of a styled component.
// Base styles, like a regular jss object.const styled = const NormalButton = composes: '$baseButton' border: 1 'solid' 'grey' color: 'black' // Composition - same way.const PrimaryButton = color: 'red' // One can use classes AND styled primitives.const MyComponent = <div className=classesroot> <NormalButton>normal button</NormalButton> <PrimaryButton>primary button</PrimaryButton> </div> const MyStyledComponent = MyComponent
Custom JSS setup
Styled-JSS uses jss-preset-default by default. You can require createStyled
function and provide your custom JSS instance.
const jss = jss // Create a custom Styled function, that allows to set BaseStyles.const Styled = // Create a custom styled function that allows to create styled components.const styled =
Install
npm install --save styled-jss
Install peer dependencies react
and react-dom
in your project.
License
MIT