Question

我正在尝试使用其classes道具自定义Material UI中开关的颜色。我不想使用withStyles HOC的原因是因为我正在创建一个自定义Formik开关，该开关可以在应用程序周围的任何地方重复使用。

但是在导出此类examples的类之后，我总是得到

提供给class prop的键switchBase对ForwardRef（Switch）无效。您需要提供一个非空字符串，而不是：[object Object]。

针对样式中的每个对象。

有人可以帮我吗？

以下是返回自定义样式对象的钩子：

const usePurpleSwitch = () => {
  return {
    root: {
      padding: 7
    },
    thumb: {
      width: 24,
      height: 24,
      backgroundColor: "#fff",
      boxShadow:
        "0 0 12px 0 rgba(0,0,0,0.08), 0 0 8px 0 rgba(0,0,0,0.12), 0 0 4px 0 rgba(0,0,0,0.38)"
    },
    switchBase: {
      color: "rgba(0,0,0,0.38)",
      padding: 7
    },
    track: {
      borderRadius: 20,
      backgroundColor: purple[300]
    },
    checked: {
      "& $thumb": {
        backgroundColor: "#fff"
      },
      "& + $track": {
        opacity: "1 !important"
      }
    },
    focusVisible: {}
  };
};

这是我的课程：


export const FormikSwitch = ({ name, label }) => {
  const [field, meta] = useField(name);
  const { setFieldValue } = useFormikContext();
  const classes = useStyles();
  const purple = usePurpleSwitch();

  const handleChange = useCallback(
    e => {
      console.log(purple);
      setFieldValue(name, e.target.checked);
    },
    [name, setFieldValue]
  );

  return (
    <>
      <FormGroup>
        <FormControlLabel
          className={classes.margin}
          name={name}
          control={(
            <Switch
              checked={field.value}
              onChange={handleChange}
              classes={purple}
            />
          )}
          label={label}
        />
      </FormGroup>
      {meta.touched && meta.error ? (
        <p className="text-warning">{meta.error}</p>
      ) : null}
    </>
  );
};

FormikSwitch.propTypes = {
  name: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
};

Answer 1

React Material UI Switch中没有focusVisible道具。我在我的项目中尝试了类似的方法，并且都运行良好。请尝试删除focusVisible，然后重试。希望这对您有帮助

Answer 2

您需要用usePurpleSwitch()将makeStyles包裹起来。

See the demo here which has working styles（注意-我已经删除了功能）

代码段

import React, { useCallback } from "react";
import { FormGroup, FormControlLabel, Switch } from "@material-ui/core";
import { usePurpleSwitch } from "./usePurpleSwitch";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(usePurpleSwitch());

export const FormikSwitch = ({ name, label }) => {
  const purple = useStyles();

  return (
    <FormGroup>
      <FormControlLabel
        name={name}
        control={
          <Switch
            // checked={field.value}
            checked={true}
            // onChange={handleChange}
            classes={purple}
          />
        }
        label={label}
      />
    </FormGroup>
  );
};

材质UI Switch自定义类反应

2 个答案: