如何在Slider中添加线性渐变颜色？ [英] How to add linear-gradient color to Slider?

问题描述

我想向Material-UI Slider添加线性渐变作为颜色。可能吗？我尽力了。

I want to add linear-gradient to Material-UI Slider as color. Is it possible? I try everything.

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

推荐答案

线性渐变 < href = https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient rel = nofollow noreferrer>创建图像，而不是颜色。因此，您需要在指定图像的CSS中使用它（例如 background-image ）。

linear-gradient creates an image not a color. So you need to use it in CSS that specifies an image (e.g. background-image).

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

Below is an example of a Slider using a gradient.

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

这篇关于如何在Slider中添加线性渐变颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！