Реагировать на пользовательский класс Material UI Switch

Question

Я пытаюсь настроить цвет переключателя в Material UI с помощью их classes props. Причина, по которой я не хочу использовать withStyles HO C, заключается в том, что я создаю настраиваемый переключатель Formik, который можно повторно использовать повсюду в моем приложении.

Однако после экспорта такого класса examples Я всегда получаю

Ключ 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

Вам нужно обернуть usePurpleSwitch() с makeStyles.

См. Демонстрацию здесь, в которой есть рабочие стили (примечание - я удалил функциональные возможности)

Фрагмент кода

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

Answer 2

В React Material UI Switch нет свойства focusVisible. Я пробую аналогичные подходы к своим проектам, и все работает нормально. Пожалуйста, попробуйте удалить focusVisible и повторите попытку. Надеюсь, это поможет вам