Strange customisation warning

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

[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

[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?