How can I style a scrollbar with react-emotion?

[snarf1974]

I'm trying to change the colour of the scrollbar thumb and make the background transparent in a reactjs project. I import emotion css:

import {css} from 'react-emotion'

I've tried adding ::-webkit-scrollbar, ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb to the following css, but I cannot get it to work. With non-react css it works (e.g. .wrapper::-webkit-scrollbar {background-color:#fff;height:4px})

How do I add ::webkit-scrollbar to this:

const CtaDropdown = css`
   position: absolute;
   left: 0;
   right: 0;
   bottom: 100%;
   padding: 0.8rem 0.8rem 1.2rem;
   background: ${colour.secondaryDark};
   color: #fff;
   max-height: 300px;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
   ${media.medium`
     position: static;
     max-height: 500px;
   `}
`

I've tried the following, but it doesn't work:

const CtaDropdown = css`
&::webkit-scrollbar {
 width: 5px;
 height: 5px;
 background: #000;}
`

const CtaDropdown = css`
*::webkit-scrollbar {
 width: 5px;
 height: 5px;
 background: #000;}
`

function CourseCta(props) {
const events = props.events;
const expandEventsCta = useSelector(state => state.expandEventsCta);
const dispatch = useDispatch();

return (
    <AccordionItemBody className={CtaDropdown}
                       hideBodyClassName={CtaDropdownHidden}>
      <EnquiryForm/>
    </AccordionItemBody>
 );
};

export default CourseCta;

[Andarist]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

[snarf1974]

Sorry I'm new to all this, I just thought that someone could advise me if this is possible or not.

[Andarist]

It's possible - the variant &:: looks correct for me at the first glance.

[snarf1974]

Hi @Andarist sorry to trouble you, I've got it working in Chrome now, the variant &:: works. I didn't have &::webkit-scrollbar width set. Thanks again. 👍🏻