0.0.4 • Published 7 years ago
mui-jss-inject v0.0.4
mui-jss-inject
injectSheet
JSS higher-order-component for use with material-ui@next
.
Removes the dependency on contextTypes
when using material-ui@next
components. Note that you must provide your own theming context, see the example here.
Usage
Use just like you would use react-jss
.
import React from 'react'
import Paper from 'material-ui/Paper'
import injectSheet from 'utils/muiInjectSheet'
const styles = {
imageContainer: {
display: 'grid',
gridTemplateColumns: '100%',
gridTemplateRows: '100%',
borderRadius: 'inherit',
padding: 10
},
image: {
objectFit: 'cover',
borderRadius: 'inherit',
userDrag: 'none',
userSelect: 'none',
}
}
const ImageCard = ({classes, image}) => (
<Paper>
<div className={classes.imageContainer}>
<img className={classes.image} src={image}/>
</div>
</Paper>
)
export default injectSheet(styles)(ImageCard)
Accessing the theme
.
Material-UI provides a theme
object to maintain consistency across the entire application. To access it, wrap your jss styles in a function.
import injectSheet from 'utils/muiInjectSheet'
const styles = theme => ({
imageContainer: {
...
backgroundColor: theme.palette.background[400]
},
image: {
...
}
})
const ImageCard = ({classes, image}) => (
...
)
export default injectSheet(styles)(ImageCard)