cssinjs / styled-jss

Styled Components on top of JSS.
http://cssinjs.org/styled-jss
MIT License
217 stars 25 forks source link

Implement injectStyled #4

Closed lttb closed 7 years ago

lttb commented 7 years ago

We need to implement injectStyled that acts like injectSheet from react-jss, but provides sharable scope with styled components.

For example:

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

const styled = Styled({
  root: {
    margin: 10,
    '& $baseButton': {
      fontSize: 15,
    },
  },
  baseButton: {
    padding: 10
  }
})

const NormalButton = styled('button', {
  composes: '$baseButton',
  border: [1, 'solid', 'grey'],
  color: 'black'
})

const MyComponent = ({classes}) => (
  <div className={classes.root}>
    {/* this would have font-size: 15 then */}
    <NormalButton />
  </div>
)

const MyStyledComponent = injectSheet(styled)(MyComponent)