Awesome Open Source
Awesome Open Source

jss-material-ui

Provide seamless components styling to material-ui with enhanced features. Permits passing props to material UI style

Introduction

Material-ui 1.0 is a great react library, but its css to jss styling could be enhanced.

Drawback of the styling provided by material-ui

  • doesn't support props
  • Styles are applied globally resulting to a lot of warning for the styles not maching the processed component

The solutions until now to resolve these problems

Some suggest to use styled libraries like styled-component, glamorous, emotion, ... to resove these problems

They resolve it, but two new problems arrive:

  • stylesheet priorisation problem.
  • two css engines on the system which provide more complexity for the app

A new small styled libray

So I decided to develop a library with the following objective:

  • use material-ui styling system, so compatibiity is 100%
  • more component oriented
  • provide props

A little sample

without props

import style from 'jss-material-ui'

// a container style
const ContainerRoot = style(Paper)({
  root: {
    width: '100%',
    marginTop: 3,
    overflowX: 'auto'
  }
})

// container use
<ContainerRoot />

The first style is applied to the corresponding styled component.

Its name is generally root. Permits to avoid material-ui warning message. If you don't have style to pass to the component, you can write

root: {}

with props

import style from 'jss-material-ui'
import TableCell from '@material-ui/core/TableCell'

const CaloriesCell = style(TableCell)((theme, {calories}) => ({
  root: {
    fontWeight: calories > 300 ? 700 : undefined,
    backgroundColor: calories > 300 ? '#ff0000' : calories < 160 ? '#00FF00' : undefined
  }
}))

// use
<CaloriesCell calories={n.calories} numeric>{n.calories}</CaloriesCell>

Result

Custom props

Its also possible to use custom props

style(TableCell, {
     myCustomProps1,
     myCustomProps2
   })
   ((theme, {calories})

Class inherithance

If a child B of a component A has for className :

<A>
   <B className={classes.classB} />
</A>

Its possible to write that:

const SA = style(A)((theme, props) => ({
  root: {
    ...
  },
  classB: {
    ...
  }
}))

The style specified in the classB object will be applied to B class component. Check stories/SimpleTableInherit.js

ref

To acces the DOM element of the component, use sref in place of ref

See the storybook Ref example

more samples

Check ./stories directory for complete samples files.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,510,439
Css (209,572
Reactjs (72,541
Styled Components (3,559
Material Ui (3,483
Styleguide (720
Style (701
Props (216
Jss (134
Related Projects