Change width,color and corner radius of the scrollbar-CodePudding

this is the table code where the styles are applied. giving the tablecontainer height as 600px makes the table scrollable but i need to customize that scrollbar and give it a different color , width and corner radius.

 <TableContainer style={{height: '600px', border: '1px solid #ffcccb', marginTop: '20px', width: '1100px', paddingLeft: '10px', paddingRight: '10px', paddingTop: '20px'}}>
                <Table sx={{ minWidth: 650 }} aria-label="simple table">
                    <TableHead>
                        <TableRow>
                            {header && header.map((item, index) => (
                                <TableCell key={index}>{item}</TableCell>
                            ))}
                        </TableRow>
                    </TableHead>

CodePudding user response：

Give className to TableContainer

.your-css-classname {
      height: '600px';
      border: '1px solid #ffcccb';
      margin-top: '20px';
      width: '1100px';
      padding-left: '10px';
      padding-right: '10px';
      padding-top: '20px';

      &::-webkit-scrollbar {
          width: 5px;
      }

      &::-webkit-scrollbar-track {
          background-color: #eceef2;
          border-radius: 180px;
      }

      &::-webkit-scrollbar-thumb {
          background-color: #9b9b9b;
          border-radius: 180px;
      }
}

CodePudding user response：

You can replace the style tag with sx and add the styling in a separate const tableSx

const tableSx = {
  height: "600px",
  border: "1px solid #ffcccb",
  marginTop: "20px",
  width: '1100px',
  padding: '20px 10px 0 10px',
  "&.MuiTableContainer-root": {
    "&::-webkit-scrollbar": {
      width: "25px"
    },
    "&::-webkit-scrollbar-track": {
      backgroundColor: "purple",
      borderRadius: "6px"
    },
    "&::-webkit-scrollbar-thumb": {
      backgroundColor: "green",
      borderRadius: "6px"
    }
  }
};

<TableContainer component={Paper} sx={tableSx}> ... </TableContainer>

Here is a codesandbox

CodePudding user response：

You can Style the MUI Table scrollbar with WebKit.

set a width using -webkit-scrollbar :

"&::-webkit-scrollbar": { width: 15, },
use "&::-webkit-scrollbar-track" to set a background color :

"&::-webkit-scrollbar-track": { backgroundColor: "#B5FF33", },
use "&::-webkit-scrollbar-thumb" to change the scrollbar thumb background color and give it rounded edges. "&::-webkit-scrollbar-thumb": { backgroundColor: "green", borderRadius: 2, },

I tried to work on your table. with the changes above, your code would be like this :

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>
  );
}