How to declare scrollbar style globally?

[Filippinifra]

I want to style the scrollbar of my website globally, so I want that each element of my website inherit this property if is scrollable

I want to use something like that

globalStyle("*", {
  selectors: {
    "&::-webkit-scrollbar": {
      width: 50,
    },

    "&::-webkit-scrollbar-track": {
      background: "#f1f1f1",
    },

    "&::-webkit-scrollbar-thumb": {
      background: "red",
    },
  },
});

but this is not working and throw me an error
Someone can help me please?

[askoufis]

The globalStyle API doesn't have access to selectors.

You'll need to split out each selector into separate globalStyle calls in order to achieve your outcome:

globalStyle("*::-webkit-scrollbar", {
  width: 50,
});

globalStyle("*::-webkit-scrollbar-track", {
  background: "#f1f1f1",
});

globalStyle("*::-webkit-scrollbar-thumb", {
  background: "red",
});