I am not able to add custom CSS to the scroll bar that i have created in a Card component in MUI rea-CodePudding

import React from "react";
import Card from "@mui/material/Card";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";
import CardMedia from "@mui/material/CardMedia";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import Grid from "@mui/material/Grid";
import ShareIcon from "@mui/icons-material/Share";
import LocalLibraryIcon from "@mui/icons-material/LocalLibrary";
import { makeStyles } from '@mui/styles';

const useStyles = makeStyles({
  scrollBar: {
    "::-webkit-scrollbar": {
      width: "3px",
    },

    "::-webkit-scrollbar-track": {
      boxShadow: "inset 0 0 5px rgb(255, 251, 251)",
      borderRadius: "10px",
    },
 
    "::-webkit-scrollbar-thumb": {
      background: "#077DFA",
      borderRadius: "10px",
    },

    "::-webkit-scrollbar-thumb:hover": {
      background: "rgb(255, 251, 251)",
    }
  }
});

export default function MediaCard(props) {
  const classes = useStyles()
  
  return (
    
    
        <Grid item md={4} >
          
          <Card className={classes.scrollBar} sx={{ maxWidth: 345 , maxHeight : 345, overflowY: "scroll"}}>
            <CardMedia
              component="img"
              height="190"
              image={props.img}
              alt={props.alt}
              
            />
          
            <CardContent>
              <Typography gutterBottom variant="h5" component="div">
                {props.headline}
              </Typography>
              <Typography variant="body2" color="text.secondary">
                {props.content}
              </Typography>
            </CardContent>
            <CardActions>
              <Button
                size="small"
                href=""
                variant="contained"
                endIcon={<ShareIcon />}
              >
                {" "}
                Share
              </Button>
              <Button
                sx={{ marginLeft: ".5rem" }}
                target="_blank"
                size="small"
                variant="contained"
                href={props.learnMore}
                endIcon={<LocalLibraryIcon />}
              >
                Learn More
              </Button>
            </CardActions>
          </Card>
        </Grid>     
  );
}

When I create a custom styles for the scroll bar by importing makeStyles function and store that under the useStyles hook and when I fire that hook and store it under classes, and finally use that classes inside class name of Card component, I see scrollbar styles unchanged. What could be the cause of this problem?

CodePudding user response：

You can customise default scroll bar with these css codes

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: #BB2020;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: #BB2020;
}

.scroll-box {
  overflow-y: scroll;
  height: 200px;
  border: 1px solid #ccc;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div >
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas vero,
        tempore earum blanditiis corporis nesciunt pariatur, et illo quidem
        ipsum minus perferendis! Deleniti sapiente, doloremque eaque sit id
        similique nulla. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas vero,
        tempore earum blanditiis corporis nesciunt pariatur, et illo quidem
        ipsum minus perferendis! Deleniti sapiente, doloremque eaque sit id
        similique nulla.
      
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas vero,
        tempore earum blanditiis corporis nesciunt pariatur, et illo quidem
        ipsum minus perferendis! Deleniti sapiente, doloremque eaque sit id
        similique nulla. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas vero,
        tempore earum blanditiis corporis nesciunt pariatur, et illo quidem
        ipsum minus perferendis! Deleniti sapiente, doloremque eaque sit id
        similique nulla.
      
      </p>
    </div>
  </body>
</html>

CodePudding user response：

You are just missing the ampersand (&) before the colon inside the scrollBar css. Try again:

import React from "react";
import Card from "@mui/material/Card";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";
import CardMedia from "@mui/material/CardMedia";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import Grid from "@mui/material/Grid";
import ShareIcon from "@mui/icons-material/Share";
import LocalLibraryIcon from "@mui/icons-material/LocalLibrary";
import { makeStyles } from '@mui/styles';

const useStyles = makeStyles({
  scrollBar: {
    "&::-webkit-scrollbar": {
      width: "3px",
    },

    "&::-webkit-scrollbar-track": {
      boxShadow: "inset 0 0 5px rgb(255, 251, 251)",
      borderRadius: "10px",
    },
 
    "&::-webkit-scrollbar-thumb": {
      background: "#077DFA",
      borderRadius: "10px",
    },

    "&::-webkit-scrollbar-thumb:hover": {
      background: "rgb(255, 251, 251)",
    }
  }
});

export default function MediaCard(props) {
  const classes = useStyles()
  
  return (
    
    
        <Grid item md={4} >
          
          <Card className={classes.scrollBar} sx={{ maxWidth: 345 , maxHeight : 345, overflowY: "scroll"}}>
            <CardMedia
              component="img"
              height="190"
              image={props.img}
              alt={props.alt}
              
            />
          
            <CardContent>
              <Typography gutterBottom variant="h5" component="div">
                {props.headline}
              </Typography>
              <Typography variant="body2" color="text.secondary">
                {props.content}
              </Typography>
            </CardContent>
            <CardActions>
              <Button
                size="small"
                href=""
                variant="contained"
                endIcon={<ShareIcon />}
              >
                {" "}
                Share
              </Button>
              <Button
                sx={{ marginLeft: ".5rem" }}
                target="_blank"
                size="small"
                variant="contained"
                href={props.learnMore}
                endIcon={<LocalLibraryIcon />}
              >
                Learn More
              </Button>
            </CardActions>
          </Card>
        </Grid>     
  );
}