css 如何设计MUI滑块？

epggiuax 于 2023-03-05 发布在其他

关注(0)|答案(3)|浏览(176)

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

来源：https://stackoverflow.com/questions/70546182/how-to-style-mui-slider

3条答案

按热度按时间

u4vypkhs1#

您可以使用样式实用程序自定义滑块：

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

Demo

赞(0）回复(0）举报 2023-03-05

von4xj4u2#

将这些类包含在CSS文件中。Track对应于thumb之间的范围，rail对应于两个thumb之外的范围。

.MuiSlider-thumb{
  color: green;
}
.MuiSlider-rail{
  color:lightgreen;
}
.MuiSlider-track{
  color: green;
}

赞(0）回复(0）举报 2023-03-05

3htmauhk3#

另一种方法是定义自定义样式。

const CustomSliderStyles = {
    '& .MuiSlider-thumb': {
        color: "#749761"
    },
    '& .MuiSlider-track': {
        color: "#749761"
    },
    '& .MuiSlider-rail': {
        color: "#acc4e4"
    },
    '& .MuiSlider-active': {
        color: "#f5e278"
    }
};

然后使用它们

<Slider sx={CustomSliderStyles} />

赞(0）回复(0）举报 2023-03-05

我来回答

css 如何设计MUI滑块？

3条答案

相关问题

热门标签

最新问答