React-jss：警告：规则未链接。缺少 sheet 选项 "link: true"

Question

我正在尝试更改 Material-UI 输入组件的下划线边框颜色。但是下面的代码不起作用并给我以下错误：

警告：规则未链接。缺少 sheet 选项 "link: true"

这些是我的进口商品：

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";

这些是 class 个名字的组合：

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

如果错误或成功道具为真，它会显示正确的颜色。我想根据道具 customColor 设置下划线颜色（如果已定义），所以我无法定义静态颜色。

这是使用组合 class 名称的组件：

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

这是样式对象：

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
    }
  }
}

这是我导出组件的方式：

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

Answer 1

暂不支持嵌套规则中的函数取值，请关注本期v10版本更新https://github.com/cssinjs/jss/issues/795

Answer 2

你应该使用 ::after 而不是 :after，看看 https://github.com/cssinjs/jss/issues/710 and https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

React-jss：警告：规则未链接。缺少 sheet 选项 "link: true"

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

reactjs

jss