材质 UI 自定义悬停颜色

Question

之前没有做过这个功能，你可以改变按钮的悬停颜色。

我已经制作了一个功能，可以使用颜色选择器通过滑块、背景颜色和字体颜色更改半径。但是，我注意到悬停（用于背景和字体）可能会更好。

代码如下：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Slider from "@material-ui/core/Slider";
import Input from "@material-ui/core/Input";
import Button from "@material-ui/core/Button";
import { ChromePicker } from "react-color";

const useStyles = makeStyles((theme) => ({
  root: {
    "& > *": {
      margin: theme.spacing(1)
    }
  },
  Button: {
    width: 150,
    height: 50,
    borderRadius: "var(--borderRadius)"
  },
  color: {
    width: "36px",
    height: "14px",
    borderRadius: "2px"
  },
  swatch: {
    padding: "5px",
    background: "#fff",
    borderRadius: "1px",
    display: "inline-block",
    cursor: "pointer"
  },
  popover: {
    position: "absolute",
    zIndex: "2"
  },
  cover: {
    position: "fixed",
    top: "0px",
    right: "0px",
    bottom: "0px",
    left: "0px"
  }
}));

export default function InputSlider() {
  const classes = useStyles();
  const [value, setValue] = React.useState(30);
  const [color, setColor] = React.useState({ r: 0, g: 0, b: 0, a: 1 });

  const [fontColor, setFontColor] = React.useState({
    r: 255,
    g: 255,
    b: 255,
    a: 1
  });
  const [displayColorPicker, setDisplayColorPicker] = React.useState(true);

  const handleSliderChange = (event, newValue) => {
    setValue(newValue);
  };

  const handleInputChange = (event) => {
    setValue(event.target.value === "" ? "" : Number(event.target.value));
  };

  const handleBlur = () => {
    if (value < 0) {
      setValue(0);
    } else if (value > 30) {
      setValue(30);
    }
  };

  const handleClick = () => {
    setDisplayColorPicker(!displayColorPicker);
  };

  const handleClose = () => {
    setDisplayColorPicker(false);
  };

  const handleChange = (color) => {
    setColor(color.rgb);
  };

  const handleFontColorChange = (color) => {
    setFontColor(color.rgb);
  };

  return (
    <div className={classes.root}>
      <style>
        {`:root {
          --borderRadius = ${value}px;
        }`}
      </style>
      <Button
        style={{
          borderRadius: value,
          background: `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`,
          color: `rgba(${fontColor.r}, ${fontColor.g}, ${fontColor.b}, ${fontColor.a})`
        }}
        variant="contained"
        color="primary"
        value="value"
        onChange={handleSliderChange}
        className={classes.Button}
      >
        Fire laser
      </Button>

      <Grid container spacing={2}>
        <Grid item xs>
          <Slider
            value={typeof value === "number" ? value : 0}
            onChange={handleSliderChange}
            aria-labelledby="input-slider"
          />
        </Grid>
        <Grid item>
          <Input
            value={value}
            margin="dense"
            onChange={handleInputChange}
            onBlur={handleBlur}
            inputProps={{
              step: 10,
              min: 0,
              max: 24,
              type: "number"
            }}
          />
        </Grid>
      </Grid>
      <div>
        <div style={useStyles.swatch} onClick={handleClick}>
          {displayColorPicker} <p class="h4">Background</p>
          <div style={useStyles.color} />
        </div>

        {displayColorPicker ? (
          <div style={useStyles.popover}>
            <div style={useStyles.cover} onClick={handleClose}></div>
            <ChromePicker color={color} onChange={handleChange} />
          </div>
        ) : null}
      </div>

      <div>
        <div style={useStyles.swatch} onClick={handleClick}>
          {displayColorPicker} <p class="h4">Font</p>
          <div style={useStyles.color} />
        </div>

        {displayColorPicker ? (
          <div style={useStyles.popover}>
            <div style={useStyles.cover} onClick={handleClose}></div>
            <ChromePicker color={fontColor} onChange={handleFontColorChange} />
          </div>
        ) : null}
      </div>
    </div>
  );
}

这里是沙盒 - https://codesandbox.io/s/material-demo-forked-t8xut?file=/demo.js

有什么建议吗？

有没有人有一篇很好的 Material UI 文章来编辑/很酷的功能和项目来玩？

Answer 1

您需要将道具传递给makeStyles。 首先，在声明类时传递fontColor变量如下：

const classes = useStyles({ hoverBackgroundColor, hoverFontColor })();

然后在useStyles中，你可以访问fontColor作为prop，如下：

const useStyles = ({ hoverBackgroundColor, hoverFontColor }) =>
makeStyles((theme) => ({
Button: {
  width: 150,
  height: 50,
  borderRadius: "var(--borderRadius)",
  "&:hover": {
    backgroundColor: `rgba(${hoverBackgroundColor.r}, ${hoverBackgroundColor.g}, ${hoverBackgroundColor.b}, ${hoverBackgroundColor.a}) !important`,
    color: `rgba(${hoverFontColor.r}, ${hoverFontColor.g}, ${hoverFontColor.b}, ${hoverFontColor.a}) !important`
  }
},

sandbox