材质ui自定义滚动条

Question

如何在材质ui中添加自定义滚动条？

我已经搜索了很多东西来添加这样的滚动条，最后我得到了这个。

谢谢大家。

Answer 1

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

const useStyles = makeStyles((theme) => ({
  root: {
    "&::-webkit-scrollbar": {
      width: 7,
    },
    "&::-webkit-scrollbar-track": {
      boxShadow: `inset 0 0 6px rgba(0, 0, 0, 0.3)`,
    },
    "&::-webkit-scrollbar-thumb": {
      backgroundColor: "darkgrey",
      outline: `1px solid slategrey`,
    },
  },
}));

export default const Customscroll= (props) => {
  const classes = useStyles();

  return (
    <Box  className={classes.root}>
    </Box>
  );

};