如何向 Slider 添加线性渐变颜色？答案

【问题标题】：How to add linear-gradient color to Slider?如何向 Slider 添加线性渐变颜色？
【发布时间】：2020-05-01 19:26:35
【问题描述】：

我想将线性渐变添加到 Material-UI Slider 作为颜色。可能吗？我什么都试。

color: 'linear-gradient(180deg, #29ABE2 0%, #00EAA6 100%)'

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

linear-gradient creates an image 不是颜色。所以你需要在指定图片的 CSS 中使用它（例如background-image）。

下面是使用渐变的Slider 示例。

import React from "react";
import { makeStyles, withStyles } from "@material-ui/core/styles";
import Slider from "@material-ui/core/Slider";

const useStyles = makeStyles({
  root: {
    width: 200
  }
});

const CustomSlider = withStyles({
  rail: {
    backgroundImage: "linear-gradient(.25turn, #f00, #00f)"
  },
  track: {
    backgroundImage: "linear-gradient(.25turn, #f00, #00f)"
  }
})(Slider);

export default function ContinuousSlider() {
  const classes = useStyles();
  const [value, setValue] = React.useState(30);

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

  return (
    <div className={classes.root}>
      <CustomSlider
        value={value}
        onChange={handleChange}
        aria-labelledby="continuous-slider"
      />
    </div>
  );
}

【讨论】：

伟大的瑞恩！谢谢你:)