Material-ui: [emotion] Unable to override TextField's label focus class.

[rockmandash]

First, thank you for this wonderful library.
Please see this minimal example

As you can see, there is no chaging on focus label color, although my custom className is in higher order, there is two combination className stick together, causing my custom className disabled.

Sorry for not typing code because I can't trigger focus when I copy.
I think this is a bug, please help, thanks.

[oliviertassinari]

@rockmandash Here is the right approach:

      <TextField
        id="pid"
        label="test"
        InputLabelProps={{
          FormLabelClasses: {
            root: css`
              &.focused {
                color: red;
              }
            `,
            focused: "focused"
          }
        }}
      />

https://codesandbox.io/s/20mo9rkl0y

Maybe we should be adding an example with Emotion in the documentation? I have prepared this codesandbox. Do you want to work on it? https://codesandbox.io/s/yw93kl7y0j

[janhoeck]

And maybe you should use the theming of material-ui.

[oliviertassinari]

Actually, documenting react-emotion would be good too.

[rockmandash]

@oliviertassinari Wow, thank you for your fast reply!
It's working right now! Thank you so much.
Documenting emotion library is good, I don't know if I can work on it, but thank you so much for asking!

[lukePeavey]

@oliviertassinari

Maybe we should be adding an example with Emotion in the documentation?

I think it makes sense to add a section to the style libraries guide on Emotion.

I'd get happy to work on this!

[oliviertassinari]

@lukePeavey Awesome. We already have the codesandbox: https://codesandbox.io/s/yw93kl7y0j.
We can add emotion to the list https://material-ui.com/guides/interoperability/. By popularity, I would say after styled-components but before glamourous.

[lukePeavey]

OK!

[lukePeavey]

We can add emotion to the list https://material-ui.com/guides/interoperability/.

Hey guys, sorry it took me a while to get to this! I'll submit a PR this weekend

[evdama]

@rockmandash Here is the right approach:

      <TextField
        id="pid"
        label="test"
        InputLabelProps={{
          FormLabelClasses: {
            root: css`
              &.focused {
                color: red;
              }
            `,
            focused: "focused"
          }
        }}
      />

https://codesandbox.io/s/20mo9rkl0y

Maybe we should be adding an example with Emotion in the documentation? I have prepared this codesandbox. Do you want to work on it? https://codesandbox.io/s/yw93kl7y0j

Looking at the code, does it mean one has to also use those JSS bits when he wants to use emotion? I'd rather not pull in JSS in addition to emotion but then maybe I'm missing something?

[lukePeavey]

@markusgattol

Looking at the code, does it mean one has to also use those JSS bits when he wants to use emotion? I'd rather not pull in JSS in addition to emotion but then maybe I'm missing something?

What JSS bits are you referring to?

[evdama]

@lukePeavey import JssProvider from "react-jss/lib/JssProvider"; for example from the link @oliviertassinari posted in his solution.

[lukePeavey]

@markusgattol I see what you mean....

You need to configure the injection order so that Emotion styles are injected below JSS styles. This is necessary to ensure that Emotion styles have higher priority than the default material ui styles. (otherwise you need to !important)

In terms of pulling in JSS, its already included your project as a dependency of material ui.

[evdama]

Reading through the docs for the last hour I actually figured I'll not use emotion because there's no need. JSS is included, as you said, and seems to be first choice when it comes to branding i.e. applying an individual style on top of components from material-ui.

I've been using preact and preact-material-components for a while but the amount of work necessary to get going and the ongoing breaking changes made me drop the entire stack, and move back to react and material-ui again.
The latter which I haven't used before because I switched from react to preact about 18 months ago for reasons of bundle size and speed, but then that gap is becoming smaller and less important as time goes on and react has more features to support fast loading on mobile etc. The suspense feature for example didn't exist back then...

[lukePeavey]

@oliviertassinari should react-emotion be a separate top level section in the interop guide or sub section of emotion

[oliviertassinari]

@lukePeavey a sub section?