Невозможно установить цвет при наведении кнопки, используя классы api material-ui - PullRequest
0 голосов
/ 01 мая 2020
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles({
  root: {
    background: (props) => props.background,
    borderRadius: (props) => props.borderRadius,
    border: (props) => props.border,
    color: (props) => props.textColor,
    width: (props) => props.btnWidth,
    height: (props) => props.btnHeight,
    "&:hover": {
      background: (props) => props.hoverBackground,
    },
  },
  label: {
    textTransform: (props) => props.textTransform,
    fontFamily: (props) => props.fontFamily,
    fontStyle: (props) => props.fontStyle,
    fontWeight: (props) => props.fontWeight,
    fontSize: (props) => props.fontSize,
    lineHeight: (props) => props.lineHeight,
    letterSpacing: (props) => props.letterSpacing,
  },
  hover: {},
});

export default function StyledButton(props) {
  const defaultStyle = {
    hoverBackground: '"#15181A"',
    textColor: "white",
    btnWidth: "8.563rem",
    btnHeight: "1.938rem",
    background: "#7DE314",
    borderRadius: 0,
    border: 0,
    textTransform: "capitalize",
    fontFamily: "Roboto",
    fontStyle: "normal",
    fontWeight: 500,
    fontSize: "0.75rem",
    lineHeight: "1.25rem",
    letterSpacing: "0.016rem",
  };

  const style = props.customStyle
    ? { ...defaultStyle, ...props.customStyle }
    : defaultStyle;

  const classes = useStyles(style);

  return (
    <Button
      classes={{
        root: classes.root,
        label: classes.label,
        hover: classes.hover,
      }}
    ></Button>
  );
}

Моя цель здесь - переопределить стили, такие как hover, disable, label и focus, используя API классов, как показано в коде, но это не работает. Хотя я могу заставить его работать, используя withStyles API, но я не могу передать реквизиты с API-интерфейсом. Кроме того, я не могу найти что-либо, связанное с наведением цвета, используя API классов в документации к Material-UI.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...