how to use withStyles

[codekiln]

When using Material UI, it's common to use import { withStyles } from 'material-ui/styles';. How would I go about making a styled component, for example, like the CheckboxList in the examples?

[InsidersByte]

Hi @codekiln

We haven't yet added bindings for withStyles.

I'll try to get some time to look at it over the next few days.

In the project I am working on we use bs-nice and then the classes object for each component.

[geraldodev]

@codekiln I'm using https://github.com/SentiaAnalytics/bs-css with success.

I've followed https://material-ui-next.com/customization/css-in-js/#other-html-element and made two modules:
https://gist.github.com/geraldodev/c16434b4887823bf3645fd0b02506bce
https://gist.github.com/geraldodev/37eff01fad48f6d67ca45636355d77b3

The objective is to create a noscript on index.hml to serve as a place holder for the css material-ui injects

    <noscript id="jss-insertion-point"></noscript>

Before make on the main component you write

InsertionPoint.updateInsertionPoint("jss-insertion-point");

let make = _children => {
  ...component,

That'll cook InsertionPoint.jss which will instruct JssProvider the css injection point on the index.html.

Wrap the main jsx render with JssProvider

  render: self =>
      MaterialUI.(
      <JssProvider jss=InsertionPoint.jss generateClassName=InsertionPoint.genClassName>
      <div className=styles##root>
      ....
       </JssProvider>

Now you can declare your css on the beautiful bs-css dsl, like so:

let styles = Css.({
  "root": style([
    display(`flex),
    flexGrow(1),
    zIndex(1),
    overflow(hidden),
    position(relative),
    width(`percent(100.0))
  ]),
  "appBar": style([
    position(relative),
    media(Breakpoints.upDefault(`md), [ 
      width(`calc(`sub, `percent(100.0), `px(larguraGaveta))),
      marginLeft(`px(larguraGaveta)),
    ]),
  ]),

and pass styles##key via className.

It's nice to use an object styles, becase we don't polute the module namespace and the awesome bucklescript compiler complains if you pass styles##wrongkey to className.

Never mind Breakpoints, it's a helper module to expose material-ui's breakpoints object https://gist.github.com/geraldodev/eb18ea44e7435ee78c470dc30c7124da