Material-ui: Strange customisation warning

[wcandillon]

Problem description

I have built a customisation of one of the Material UI component successfully. However at runtime, I'm getting a strange warning.

Steps to reproduce

import * as React from "react";

import { TextField } from "material-ui";
import { withStyles } from "material-ui/styles";
import { Theme } from "material-ui/styles/theme";

import { Styles, StylingProps } from ".";

type Classes = "inkbar" | "underline";

const styles = (theme: Theme): Styles<Classes> => ({
    inkbar: {
        "&:after": {
            backgroundColor: theme.palette.primary[500]
        }
    },
    underline: {
        "&:hover:not($disabled):before": {
            height: "1px !important"
        }
    }
});

interface TextInputProps {
    placeholder: string;
}

class TextInput extends React.Component<StylingProps<Classes> & TextInputProps> {
    render() {
        const {classes} = this.props;
        const {placeholder} = this.props;
        return <TextField fullWidth={true} {...{ placeholder }} InputProps={{ classes } as {}} />;
    }
}

export default withStyles<TextInputProps>(styles)(TextInput);

The customization works as expected but I'm running, the following warning is thrown:

Warning: Material-UI: the key `.TextInput-inkbar-11:after` provided to the classes property object is not implemented in Input.
You can only overrides one of the following: root,formControl,inkbar...

am I doing something wrong?

Versions

• Material-UI: v1-beta6

[oliviertassinari]

am I doing something wrong?

Have a look at the classes structure object. Something is definitely wrong.

[wcandillon]

@oliviertassinari Thank you so much for giving the lead on this.
The classes struct looked like this:

{inkbar: "TextInput-inkbar-11", underline: "TextInput-underline-12", .TextInput-inkbar-11:after: "TextInput-inkbar-11:after", .TextInput-underline-12:hover:not(disabled):before: "TextInput-underline-12:hover:not(disabled):before"}

So I had to filter the .TextInput-inkbar-11:after and .TextInput-underline-12:hover:not(disabled):before properties to get rid of the warning. Is this a bug?

I'm also getting the following warning:

Warning: [JSS] Could not find the referenced rule disabled in TextInput.

Probably because I don't use these rules in TextInput but only to pass them into the subcomponent? Is there a way I could get rid of this warning as well?

[oliviertassinari]

So I had to filter the .TextInput-inkbar-11:after and .TextInput-underline-12:hover:not(disabled):before properties to get rid of the warning. Is this a bug?

I have been noticing the same thing. It could be a JSS issue. @kof Any light on this point? 💡

Probably because I don't use these rules in TextInput but only to pass them into the subcomponent?

On the other hand, it's the expected behavior. $disabled is scoped to the styles you are declaring.

[wcandillon]

@oliviertassinari anyway I can update my code to not have the last warning?

[oliviertassinari]

@wcandillon This way you get the correct precedence:

const styles = (theme: Theme): Styles<Classes> => ({
    inkbar: {
        "&:after": {
            backgroundColor: theme.palette.primary[500]
        }
    },
    underline: {
        "&:hover:not($disabled):before": {
            height: "1px !important"
        }
    }
+   disabled: {},
});

[kof]

Which warning are we talking about, from reading I see 2 warnings mentioned.

1. One is from MUI, happens when structure passed in overrides doesn't match the one used by mui in the component.

In this regard I also had some issues, we should allow defining additional styles to what mui is using.

1. Another is from JSS, happens when there is no matching rule referenced over jss-extend or jss-compose.

If you log the resulting object that is being passed to JSS, you should be able to see that it is missing.

[wcandillon]

@kof @oliviertassinari Thanks for your support, I got rid of all warnings :)

[kof]

@oliviertassinari should we create a separate issue for relaxing overrides?

[oliviertassinari]

One is from MUI, happens when structure passed in overrides doesn't match the one used by mui in the component.

@kof The behaviour I'm referring to comes from createStyleSheet().classes that returns something like:

{
  inkbar: "TextInput-inkbar-11",
  underline: "TextInput-underline-12",
  .TextInput-inkbar-11:after: "TextInput-inkbar-11:after",
  .TextInput-underline-12:hover:not(disabled):before: "TextInput-underline-12:hover:not(disabled):before"
}

Instead of

{
  inkbar: "TextInput-inkbar-11",
  underline: "TextInput-underline-12",
}

I had to handle this point in the automatic classes documentation generation. I filter some invalid keys. So we don't see them. For instance with the <Input /> documentation page.
https://github.com/callemall/material-ui/blob/5c85bf7ab85d19b166f7ed6c5b2b59ead07f9d09/docs/scripts/buildApi.js#L46-L52

Maybe it's expected?

[kof]

Not it's not expected, can someone create a reproducible webpackbin with just JSS, without everything else? Also what JSS version?

[oliviertassinari]

@kof, let me try

[oliviertassinari]

https://codesandbox.io/s/o9rrpml23y

[wcandillon]

@oliviertassinari @kof I have another tiny minor issue with the code snippet that will probably come up as well with your users. The customized inkbar rule takes precedence over default error rule. See screenshot: https://www.dropbox.com/s/31v7yzg07edurhe/Screenshot%202017-09-05%2015.11.23.png?dl=0

To fix this issue, I have to create a customized error rule which is identical to the default one:

const styles = (theme: Theme): Styles<Classes> => ({
    inkbar: {
        "&:after": {
            backgroundColor: theme.palette.primary[500]
        }
    },
    error: {
        "&:after": {
            backgroundColor: theme.palette.error[500]
        }
    },
    disabled: {}
});

Just thought it was worth mentioning.

[oliviertassinari]

@wcandillon Yes, I do think that it's the expected CSS specificity behavior. You have to take into account injection order and the depth of the selector. I'm closing as I don't think we can do much to move forward on our end. Hopefully, https://codesandbox.io/s/o9rrpml23y will help @kof.

[kof]

already fixed in [email protected] https://codesandbox.io/s/6zl02z88ow

[oliviertassinari]

@kof Awesome, can't wait to upgrade.

[T-Grave]

@oliviertassinari You probably lost track of this one since it was already closed, but we still need to bump JSS to v9 (or 9.1) to fix this :)

[oliviertassinari]

@T-Grave The discussion moved to #8564.

[GaddMaster]

Hi

I cannot change the bar colour on checked

const GreenSwitch = withStyles({
  switchBase: {
    color: grey[300],
    '&$checked': {
      color: green[500]
    }
  },
  bar: {
    background: grey[200],
  },
  checked: {}
})(Switch);

Tried many things

Daniel

[eps1lon]

@GaddMaster Please open a new issue and fill out the issue template.

[oliviertassinari]

@GaddMaster We have restrucuted the swtich classes keys. You will find the new names under the latest demos of the customization, or opening your dev tools and inspecting the element.

[GaddMaster]

@oliviertassinari
Thanks for reply. OK, Let me ask another question.
Link: https://material-ui.com/components/switches/
Row : Customize switches
Code:
const PurpleSwitch = withStyles({
switchBase: {
color: purple[300],
'&$checked': {
color: purple[500],
},
'&$checked + $track': {
backgroundColor: purple[500],
},
},
checked: {},
track: {},
})(Switch);
This is the code shared , and I did try this. It throws and error if you leave track{} in and throws and error without. I also cannot read anywhere how to change the bar using this style ? Can you advise ?

ERROR WITH: index.js:1437 Warning: Material-UI: the key track provided to the classes property is not implemented in Switch.
You can only override one of the following: root,icon,iconChecked,switchBase,checked,colorPrimary,colorSecondary,disabled,bar

ERROR WITHOUT: Warning: [JSS] Could not find the referenced rule track in WithStyles(Switch).

I have the remove the entire track business to remove error

Also i tried changing the bar many ways at no success. I can change it before its checked, onlyu issue is after its checked ?

Daniel

[freddiecabrera]

Same thing happening to me as @GaddMaster