[英]How to style MUI slider?
import * as React from "react";
import Box from "@mui/material/Box";
import Slider from "@mui/material/Slider";
function valuetext(value) {
return `${value}°C`;
}
export default function RangeSlider() {
const [value, setValue] = React.useState([20, 37]);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<Box sx={{ width: 300 }}>
<Slider
getAriaLabel={() => "Temperature range"}
value={value}
onChange={handleChange}
valueLabelDisplay="auto"
getAriaValueText={valuetext}
/>
</Box>
);
}
如何使拇指內的范圍和拇指綠色以及兩個拇指外的范圍變淺綠色?
在 CSS 文件中包含這些類。 軌道對應於拇指之間的范圍,軌道是兩個拇指之外的范圍。
.MuiSlider-thumb{
color: green;
}
.MuiSlider-rail{
color:lightgreen;
}
.MuiSlider-track{
color: green;
}
您可以使用樣式實用程序自定義 slider:
const green500 = "#228b22";
const green900 = "#7FFF00";
const CustomSlider = styled(Slider)(({ theme }) => ({
color: green500, //color of the slider between thumbs
"& .MuiSlider-thumb": {
backgroundColor: green500 //color of thumbs
},
"& .MuiSlider-rail": {
color: green900 ////color of the slider outside teh area between thumbs
}
}));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.