You have the ability to customize the MUI Table scrollbar using WebKit.
To specify a width, utilize -webkit-scrollbar :
"&::-webkit-scrollbar": { width: 15, },
For setting a background color, you can use "&::-webkit-scrollbar-track" :
"&::-webkit-scrollbar-track": { backgroundColor: "#B5FF33", },
If you want to modify the scrollbar thumb's background color and shape it with rounded edges, employ "&::-webkit-scrollbar-thumb".
"&::-webkit-scrollbar-thumb": { backgroundColor: "green", borderRadius: 2, },
I have made adjustments to your table according to the changes specified above. Here is how your code will look like:
import React from "react";
import Table from "@mui/material/Table";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
const data = [
1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 6, 7, 8, 9,
];
export default function Test() {
return (
<div>
<TableContainer
sx={{
marginTop: "20px",
paddingRight: "10px",
paddingTop: "20px",
paddingLeft: "10px",
border: "1px solid #ffcccb",
height: "600px",
width: "800px",
"&::-webkit-scrollbar": {
width: 15,
},
"&::-webkit-scrollbar-track": {
backgroundColor: "#B5FF33",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "green",
borderRadius: 2,
},
}}
>
<Table
sx={{
minWidth: "650",
}}
aria-label="simple table"
>
<TableHead>
<TableRow>
{data.map((item, index) => (
<TableCell key={index}>{item}</TableCell>
))}
</TableRow>
</TableHead>
</Table>
</TableContainer>
</div>
);
}