CODEWITHSUNDEEP
reactjsjss
Derk Kleimeer
Derk Kleimeer

Reputation: 33

React-jss: Warning: Rule is not linked. Missing sheet option "link: true"

I'm trying to change the underline border-color of a Material-UI input component. But the following code doesn't work and gives me the following error:

Warning: Rule is not linked. Missing sheet option "link: true"

These are my imports:

import React from "react";
import classNames from "classnames";
import PropTypes from "prop-types";
import injectSheet from "react-jss";
import customInputStyle from "../../assets/jss/material-dashboard-react/components/customInputStyle.jsx";

These are the class names combined:

  const underlineClasses = classNames({
    [classes.underlineError]: error,
    [classes.underlineSuccess]: success && !error,
    [classes.underlineCustom]: customColor,
    [classes.underline]: true
  });

If the error or succes props are true, it does show the right color. I want to set the underline color based on the prop customColor if its defined, so I can't define a static color.

This is the component that uses the combined class names: 

  <Input
    classes={{
      underline: underlineClasses
    }}
  />

This is the style object:

const customInputStyle = {
  underline: {
    "&:hover:not($disabled):before,&:before": {
      borderColor: "#D2D2D2 !important",
      borderWidth: "1px !important"
    },
    "&:after": {
      borderColor: primaryColor
    }
  },
  underlineError: {
    "&:after": {
      borderColor: dangerColor
    }
  },
  underlineSuccess: {
    "&:after": {
      borderColor: successColor
    }
  },
  underlineCustom: {
    "&:after": {
      borderColor: props => props.customColor
    }
  }
}

this is how I export the component:

export default injectSheet(customInputStyle, { link: true })(CustomInput);

Upvotes: 3

Views: 4743

Answers (2)

Fraction
Fraction

Reputation: 12984

You should use ::after instead of :after, look at https://github.com/cssinjs/jss/issues/710 and https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Upvotes: 3

Oleg Isonen
Oleg Isonen

Reputation: 1493

Function values in nested rules are not supported yet, follow the v10 release updates in this issue https://github.com/cssinjs/jss/issues/795

Upvotes: 1

Related Questions