Usage with bs-css

[amiralies]

Is it possible to use mui with bs-css? I tried to use bs-css's style function output as className for components but it seems this doesn't work well. it seems they are applied before materual ui classes so they got overriden by material ui classes

[fhammerschmidt]

Yes. You need to use the StylesProvider, which there is no binding for yet, unfortunately.

Example:

module Styles = {
  open CssJs

  let categoryButton = style(.[textTransform(#none), justifyContent(#flexStart)])
  let icon = style(.[fontSize(px(24)), width(px(50))])
}

@react.component
let make = () => {
  open MaterialUi

  <Mui_StylesProvider injectFirst=true>
    <Button
      color=#Primary classes={Button.Classes.make(~root=Styles.categoryButton, ())} onClick=ignore>
      {React.string("Hello, BS-CSS & MUI!")}
    </Button>
  </Mui_StylesProvider>
}

Watch the button text become uppercase when you change the injectFirst property to false.

I made an example project which includes the binding.

We will include the binding to the StylesProvider in the upcoming version.

[amiralies]

Thank you!
I think bs-css-dom should also work right?

[fhammerschmidt]

I only used it with emotion myself. But the problem is just that JSS styles get applied after user styles as you said, so this solution probably works for all of them.

[cknitt]

StyleProvider is now included in version 2.1.0.