cssinjs/styled-jss

Name: styled-jss

Owner: CSSinJS

Description: Styled Components on top of JSS.

Created: 2017-04-19 12:12:18.0

Updated: 2018-01-16 09:50:01.0

Pushed: 2018-01-19 00:11:40.0

Homepage: http://cssinjs.org/styled-jss

Size: 246

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

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

rt styled from 'styled-jss'

t Button = styled('button')({
ntSize: 12,
lor: (props) => props.theme.textColor


ou can also use curried interface this way.
t div = styled('div')

t Container = div({
dding: 20


omposition.
t PrimaryButton = styled(Button)({
lor: 'red'


omposition with unstyled React Components too.
t Button = styled(UnstyledButton)({
lor: 'blue'


omponent Selectors.
t ButtonContainer = styled(Container)({
color: 'green'

Base Style Sheet

Using base Style Sheet we can reuse classes in the render function and inside of a styled component.

rt { Styled, injectStyled } from 'styled-jss'

ase styles, like a regular jss object.
t styled = Styled({
ot: {
margin: 10,
'& $baseButton': {
  fontSize: 16
}

seButton: {
padding: 10,
'& + &': {
  marginLeft: 10
}



t NormalButton = styled('button')({
mposes: '$baseButton',
rder: [1, 'solid', 'grey'],
lor: 'black'


omposition - same way.
t PrimaryButton = styled(NormalButton)({
lor: 'red'


ne can use classes AND styled primitives.
t MyComponent = ({classes}) => (
iv className={classes.root}>
<NormalButton>normal button</NormalButton>
<PrimaryButton>primary button</PrimaryButton>
div>


t MyStyledComponent = injectStyled(styled)(MyComponent)

Custom JSS setup

Styled-JSS uses jss-preset-default by default. You can require createStyled function and provide your custom JSS instance.

rt { create as createJss } from 'jss'
rt vendorPrefixer from 'jss-vendor-prefixer'
rt createStyled from 'styled-jss/createStyled'

t jss = createJss()
use(vendorPrefixer())

reate a custom Styled function, that allows to set BaseStyles.
rt const Styled = createStyled(jss)

reate a custom styled function that allows to create styled components.
t styled = Styled()

rt default styled

Install

install --save styled-jss

Install peer dependencies react and react-dom in your project.

License

MIT