Customize Color of Scrollbar

[gbroques]

How would we customize the color of the scrollbar from the default of rgba(0, 0, 0, .1)?

I'd like to use this in an application with a dark background color, and rgba(0, 0, 0, .1) doesn't show up well on dark backgrounds.

[ivnflpz]

@gbroques I was able to customize the color by looking at the structure of the html and realizing that I can target the last child div of the CustomScroller. It's somewhat hacky but it works given we can't directly add classes to the track element.

If you're using makeStyles from material-ui, you can do something like this

import * as React from "react";
import { makeStyles } from "@material-ui/core";
import CustomScroller from "react-custom-scroller";

const useStyles = makeStyles({
  scroller: {
    "&> div:last-child": {
      background: "rgba(34, 157, 158, 0.4)",
    },
  },
});

const CustomColorScoller = ({ children }) => {
  const classes = useStyles();
  return (
    <CustomScroller className={classes.scroller}>{children}</CustomScroller>
  );
};

export default CustomColorScoller;

[gbroques]

@ivnflpz Thank you for the workaround! I will close this issue. 😄

[buzinas]

I'll keep it open because we plan to add an official way of doing this via props.

[gbroques]

I'll keep it open because we plan to add an official way of doing this via props.

This would be great. :)

[ApplePieGiraffe]

Yes, this would be awesome!