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.