Is it possible to apply a personalized scrollbar design to the Autocomplete Listbox component in Mui?

I am struggling to implement a custom scroll style in Autocomplete Listbox.

https://i.sstatic.net/MifSm.png

After multiple attempts and thorough research, I have been unsuccessful in achieving the desired result.

Here is my most recent code:

    <Autocomplete
                fullWidth
                popupIcon={<KeyboardArrowDownIcon />}
                id="combo-box-demo"
                options={allTableData}
                noOptionsText={"Məhsul tapılmadı"}
                getOptionLabel={(option) => option.name ?? option}
                ListboxProps={{
                  style: {
                    maxHeight: "200px",
                    "&::-webkit-scrollbar": {
                      width: "20px",
                    },
                  },
                }}
cssscrollmaterial-ui

Answer №1

A custom className can be passed to the ListboxProps of the Autocomplete component in the following way:

ListboxProps={{
    className: "myCustomList"
  }}

Afterward, scrollbar-related CSS can be added to this class like so:

.myCustomList::-webkit-scrollbar {
  width: 12px;
  background-color: #5f6f9c;
}

.myCustomList::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #d62929;
}

For a live working example of this solution, you can visit this sandbox.

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

Emphasize the CSS property and give it top priority

I am struggling with setting the highest priority for the background of the <h1> element. Specifically, I want the background color specified for the <h1> to show instead of what is specified for the <a> element. h1{ background-color:b ...

htmlcss

Adjustable positioning and size of dropdown menu (triggered by clicking)

Currently developing the following webpage: https://jsfiddle.net/t9f2ca4n/212/ Check the raw code at the bottom of the page. The issue at hand involves adding two buttons for each line item (Item I or Item II) to display setup details under "Cate ...

javascripthtmlcssdropdown

Vue JS console displays an error stating "the <li> tag is missing a closing tag."

Below is the code snippet I am currently using to change the color based on the character's name: I encountered an error indicating that the li tag was not properly closed, although it appears to be closed. However, there seems to be an issue during ...

javascripthtmlcssvue.js

Implementing the switchClass function on a parent class when hovering over a child class, while ensuring that only the specific divs are targeted and not others with the

Currently using the .switchClass function on both the .container divs whenever I hover, causing all child1 elements within these containers to change from 100% width to 40% width. However, I only want this switch to occur on the specific container that I&a ...

jqueryhtmlcsssass

Encountering an error message in Material UI that reads: "Error with prop type: isValidElement is not a function" specifically while implementing the mui

Recently, I encountered a problem with MUI's Accordion component in my next.js app. It started throwing errors related to Failed prop type: isValidElement is not a function. These errors seem to be coming from various components of the MUI Accordion l ...

reactjswebpacknext.jsmaterial-ui

How do I populate a value in React Formik Material UI Autocomplete using data from localStorage?

I've been working on creating a form using Formik and Material UI. Everything is functioning correctly for all fields except Autocomplete. I'm struggling to populate the field from localStorage. I've tried various approaches like using value ...

reactjsmaterial-uiformik

Incorporating a YouTube or Vimeo video while maintaining the proper aspect ratio

On my video page, I embed Vimeo videos dynamically with only the video ID. This causes issues with the aspect ratio as black bars appear on the sides due to the lack of width and height settings. The dynamic video ID is implemented like this: <iframe ...

javascripthtmlcssvideoyoutube

Concealed image lurking beneath navigation bar

My navbar displays an image below it, but the top part of the image is cut off. The desired outcome is for the image to start at the bottom of the navbar to prevent any cropping issues. This becomes more noticeable as the screen size decreases. I attempted ...

htmlcss

Flexbox CSS Card Layout Behavior

Looking to achieve a specific design effect without relying on Semantic UI? Check out the codepen link here: https://codepen.io/anon/pen/YxBOax <div class="ui container"> <div class="ui four cards stackable"> <div class="teal card"> ...

htmlcsssemantic-uicss-grid

What is the best way to animate a three.js object to the right using GSAP without obstructing the surrounding HTML text?

As a newcomer to web design, I seek forgiveness if my question appears basic. I am working on an animated object in three.js that I want to move to the left side of the screen using GSAP. Additionally, I have a text "Hello" on the left side of the screen. ...

htmlcssthree.jsgsap

What could be preventing me from exporting and applying my custom JavaScript styles?

This is my primary class import React, { Component } from 'react'; import { withStyles } from '@material-ui/core/styles'; import styles from './FoodStyles'; class Food extends Component { render () { return ( & ...

javascriptreactjsmaterial-ui

The bottom of the page showcases the menu element

I have been utilizing Bootstrap to display a navigation bar: https://i.sstatic.net/P9maf.png In the provided screenshot, you can observe that the first menu item is positioned at the lower level compared to the rest of the menu elements. Below are the CS ...

htmlcsstwitter-bootstrap

Using 'settingsToggleClassName' in Griddle: A Step-by-Step Guide

When using the settingsToggleClassName, it's important to provide a string input. To implement this feature, I have created the following style: let griddleBtnStyle = { background: 'red' }; I am then using this style as follows: <Gri ...

reactjsmaterial-uigriddle

CSS from the parent page is not being applied to AJAX-injected content

I recently added AJAX functionality to a new website to dynamically load and insert Wordpress page content using AJAX. However, I encountered an issue where some CSS styles that were supposed to be loaded in the page head were not being applied. This resu ...

jquerycssajax

Bootstrap - Border padding excessively wide

For a project exercise using bootstrap, I'm working on recreating a page that can be found here: https://codepen.io/freeCodeCamp/full/NNvBQW I've hit a roadblock in trying to put a border around the image. Here's the code I have so far: htt ...

htmlcsstwitter-bootstrap

What could be causing a specific CSS class to not take effect?

Recently, I embarked on a journey to learn Django framework with Python. My main source of knowledge is a course I found on YouTube. However, I encountered an issue where the CSS and JS features were not applying to my page as demonstrated in the course. ...

cssdjangobootstrap-4

In order to display the particle-slider logo effect, the JavaScript on the page needs to be refreshed

I have a website frontend integrated from WordPress using an HTML 5 Blank Child Theme. The site features a logo effect utilizing particle slider for screen sizes greater than 960px, and a flat logo image for screen sizes less than 960px. Everything works p ...

javascriptjquerycsswordpressresize

Enhance the appearance of a custom checkbox component in Angular

I developed a customized toggle switch for my application and integrated it into various sections. Recently, I decided to rework it as a component. However, I am encountering an issue where the toggle switch button does not update in the view (it remains t ...

cssangulartypescripttoggle

Why is the CSS not correctly linked to the index.html file?

Currently, I am working on a project involving a "is it newyear page" that should provide a simple yes or no answer. While the functionality of the page is not the issue, I am facing a problem with the link placement. I have included a link inside the < ...

cssdjango

"Utilizing images within an iframe: A step-by-step guide

I'm trying to integrate an iframe into a phone image with a transparent background. However, I am unsure how to effectively mask the iframe so that it only appears within the boundaries of the phone image. .phone { display: block; position: r ...

htmlcss