Skip to content

Implement injectStyled #4

@lttb

Description

@lttb

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)

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions