Simple ways to personalize scrollbar in Material UI

Recently, I have been incorporating Material-UI into my React project to enhance its functionality. However, I encountered an issue where I was unable to customize the scrollbars within the Material-UI components. Here is the CSS code that I was using prior to integrating Material-UI:

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

Upon further investigation, I realized that the CSS styling was being overridden by the default Material-UI styles when using components like <Box/> or <Drawer/>. Additionally, I am utilizing <ThemeProvider/> from Material-UI with the following theme configuration:

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: {},
});

Despite attempting to implement CSS Baseline overrides as suggested in the [Mui documentation](https://mui.com/components/css-baseline/#scrollbars), I wasn't able to achieve the desired outcome. This could be attributed to my limited understanding of Material-UI's styling and the deprecation of CSS Baseline scrollbars.

My question now is, how can I integrate the scrollbar styles shown above into a Material-UI component or theme? Any insights or guidance would be greatly appreciated.

javascriptcssreactjsmaterial-uiscrollbar

Answer №1

For my specific situation, I found that I needed to include the parent class and webkit properties in this format for the calendar component from MUI:

MuiCalendarPicker: {
      styleOverrides: {
        root: {
          '.css-1wvgxus-MuiCalendarPicker-viewTransitionContainer::-webkit-scrollbar': {
            width: '8px',
            marginRight: '5px'
          },
          '.css-1wvgxus-MuiCalendarPicker-viewTransitionContainer::-webkit-scrollbar-track': {
            background: '#E4E7EB', 
            borderRadius: '100px'
          },
          '.css-1wvgxus-MuiCalendarPicker-viewTransitionContainer::-webkit-scrollbar-thumb': {
            background: '#6B7786',
            borderRadius: '100px'
          },
        }
      }
}

Answer №2

In my experience with MUI version 5, I found that adding enableColorScheme to the CssBaseline component resolved the issue for me. This solution was recommended in the documentation.

import React from 'react';
import { createTheme, ThemeProvider, useMediaQuery, CssBaseline } from '@mui/material';
import Home from './components/home';

function App() {
  // Using the useMediaQuery hook to determine if dark mode is preferred
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

  // Creating the theme based on user preference
  const theme = createTheme({
    palette: {
      mode: prefersDarkMode ? 'dark' : 'light',
    },
  });

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline enableColorScheme/>
      <Home/>
    </ThemeProvider>
  );
}

export default App;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Generate a smooth, flicker-free card flip animation in CSS3 across all browsers while addressing any z-index or perspective issues

Currently, I am attempting to implement a simple cross-browser 3D CSS3 card flip effect on my testing website. The outcome functions perfectly in Firefox; however, in WebKit, one part of the image vanishes during the rotation and also experiences noticeab ...

csscross-browsercss-transitions

difficulty eliminating white space in HTML display using Bootstrap

Encountering an issue with the template view below. A scrollbar was added to the "Used in" table at the bottom, but there is excessive whitespace beneath it. Removing divs/elements one by one reveals that the problem seems to stem from the table itself. v ...

htmlcssdjangoscrollwhitespace

Error: Cannot iterate over Redux props map as it is not a function

I've encountered an issue while trying to render out a Redux state by mapping through an array of objects. Despite receiving the props successfully, I keep getting an error stating that 'map is not a function'. It seems like the mapping func ...

javascriptreactjsredux

Vue.js not accepting an object as input value

I am working with an input type text in my vue js application. This is the initial code snippet: <input type="text" v-model="answer[index]" > Here is the updated code: <table> <tr v-for="(question_overall, index) in questions"> ...

javascriptlaravel-5vue.jsvuejs2vue-component

Why aren't the general sibling combinator & adjacent sibling combinator effective for selecting ul + li & tr + td elements?

I have recently started learning development, and I am practicing HTML & CSS by following tutorials on YouTube. In one of the tutorial videos, the instructor explained advanced selectors, including adjacent and general sibling combinators. For example: h ...

htmlcss

Include a CSS counter style class that adds leading zeros

Looking for a way to increment a particular <p> style class (p.wp as an example) from 1 - n across multiple HTML pages. The challenge is that the number needs to have 4 digits, ranging from 0001 to 0117. #start_wp {counter-reset: WP 0;} p.wp{} p. ...

javascriptjqueryhtmlcss

Can MUI FormControl and TextField automatically validate errors and block submission?

Are MUI components FormControl and TextField responsible for error handling, such as preventing a form from being submitted if a required TextField is empty? It appears that I may need to handle this functionality myself, but I would like some clarificatio ...

javascriptreactjsmaterial-ui

Improper comment placement in Rails with AJAX and JQUERY

I am developing a "comment system without page refreshing" using Jquery and Ajax. Within posts/show.html.erb <%= @post.title %> <%= @post.body %> <%= render 'comment %> posts/_comment.html.erb <%= link_to "Add Comment", new_po ...

javascriptjqueryruby-on-railsajaxrails-5.1.6

Trouble Loading TypeScript Class in Cast Situation

I've encountered an issue with my TypeScript model while using it in a cast. The model does not load properly when the application is running, preventing me from accessing any functions within it. Model export class DataIDElement extends HTMLElement ...

javascriptangularjstypescript

How does the function window.open determine whether to open a new tab or switch to an existing tab based on specific criteria?

As I navigate through new tabs and existing tabs, I am curious about the criteria that determines whether a new tab is opened or if the browser simply reopens an existing tab with the same name. Could someone shed light on the specific parameters being co ...

javascriptjqueryhtmltabs

Menu with full-width navigation and dropdown options

I am trying to create a navigation menu with a black background that spans the full width of the window. To achieve this, I have placed the ul element inside a div with overflow: hidden; set. However, I am facing issues where hovering over submenus causes ...

htmlcssnavigation

Trouble receiving JSON data from jQuery method

I am encountering difficulty in correctly capturing a JSON object within a function that is executed when the page loads. My goal is to capture this object so that I can later POST it to another page based on user action. This code is being run on Windows ...

javascriptjqueryajax

When attempting to execute the 'npm start' command, an error was encountered stating "start" script is

Encountering an issue when running "npm start." Other users have addressed similar problems by adjusting the package.json file, so I made modifications on mine: "scripts": { "start": "node app.js" }, However, t ...

javascriptnode.jsjsonnpmwebpack

Invoking a non-static method in the server-side using a client-side function

I am trying to retrieve an object from the server side using static receive callbackresult methods. However, my goal is to execute a non-static method on my page to populate an ajax accordion by invoking a client-side function. The object I am fetching f ...

asp.netjavascriptajaxasmx

Populating table with information stored locally

Hello there, I am currently working on a journal project where I am facing an issue with the getItem function of localStorage. Whenever I add entries to the table and refresh the page, all the entries disappear except for one row with default input values ...

javascripthtmllocal-storage

Toggle the class and execute the order within a jQuery script

When the mouse moves in, the jQuery trigger enters the status. $(".test").bind("mouseenter mouseout", function(event) { $(this).toggleClass("entered"); alert("mouse position (" + event.pageX + "," + event.pageY + ")"); }); .entered { ...

javascriptjqueryhtmlcss

Enhancing Rails functionality with drag-and-drop to modify object attributes

I work with two main models: Collections and Images Collection Model class Collection < ActiveRecord::Base has_many :images, dependent: :destroy accepts_nested_attributes_for :images end Image Model class Image < ActiveRecord::Base belongs_ ...

javascriptjqueryruby-on-railsrubyajax

Ways to Influence Nearby Element using CSS Hover Effects

Below is the HTML code snippet: <div id="flexi-overlay"> <a id="flexi-overlay-image-link-container" href="#" class="popup image-link"?> <img src="image.jpg" /> </a> <span id="flexi ...

htmlcssopacity

The IntroJs step is only partially visible on the screen

Currently, I am incorporating introJS into my application and encountering an issue where one of the steps is only partially visible on the screen. Despite trying various position settings such as auto, left, right, etc., this particular item consistentl ...

javascripthtmlcssionic-frameworkintro.js

Tips for customizing elements using Wordpress

Is there a way to easily make my four divs containing icon images and descriptive text editable in WordPress? I have some experience setting up basics and using widgets in my footer and sidebar, but I'm not sure if that's the best approach for th ...

phphtmlcsswordpress