css - 如何向 Slider 添加线性渐变颜色?
问题描述
我想将线性渐变添加到 Material-UI Slider 作为颜色。可能吗?我什么都试。
color: 'linear-gradient(180deg, #29ABE2 0%, #00EAA6 100%)'
解决方案
linear-gradient
创建图像而不是颜色。因此,您需要在指定图像的 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>
);
}
推荐阅读
- python - 如何从 python 中的多个光栅文件创建 netcdf 文件?
- javascript - 总是得到未定义的值
- android - 如何根据选定的段制作范围?
- node.js - Else 语句不会停止循环 NodeJS
- php - 如何使用多个数据集操作 laravel 获取请求
- angular - 使用网络工作者 (Angular) 加载 iframe
- java - SMS Intent 仅在 oneplus 手机中不填充收件人
- mongodb - CrashLoopBackOff 同时在 Azure AKS 群集上为 MongoDB 映像增加副本计数超过 1
- c# - Excel中的C#避免VBA
- sql - 如何将 MMYYYY (042011) 转换为日期并找到今天日期的 datediff