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)
We need to implement
injectStyledthat acts likeinjectSheetfromreact-jss, but provides sharable scope with styled components.For example: