How to customize scrollbar in Material UI?

I am using Material-UI to expand my React project, but i can’t change the scrollbars in the mui components.
This was the css i was using before mui integration:

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 5px;
    margin: 5px;
}

::-webkit-scrollbar-thumb {
    background-color: #1a1b1c;
    border-radius: 5px;
    border: solid 2px #282c34;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #1a1b1c;
    border-radius: 5px;
    border: solid 2px #1a1b1c;
}

After using mui I realized css is overwritten by mui’s own styling while using mui components such as <Box/> or <Drawer/>. I’m also using <ThemeProvider/> from mui with following theme:

export const dark_theme = createTheme({
  breakpoints: {
    values: {
      mobile: 0,
      desktop: 1024,
    },
  },
  palette: {
    type: "dark",
    primary: {
      main: "#3f51b5",
      contrastText: "#fff",
    },
    secondary: {
      main: "#8700ff",
      contrastText: "#fff",
    },
    background: {
      default: "#282c34",
    },
  },
  typography: {
    fontFamily: "Poppins",
    allVariants: {
      color: "white",
    },
  },
  overrides: {},
});

After trying CSS Baseline overrides from mui documentation, i couldn’t get any results but also couldn’t confirm what was the problem due to my limited understanding of mui`s styling and the fact that CSS Baseline scrollbars was marked deprecated.

how can i integrate the above shown css scrollbar styles to a mui component or mui theme?