score:42
since you want to do this globally, you may want to follow what cssbaseline does in it source code: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/cssbaseline/cssbaseline.js
const styles = theme => ({
'@global': {
'*::-webkit-scrollbar': {
width: '0.4em'
},
'*::-webkit-scrollbar-track': {
'-webkit-box-shadow': 'inset 0 0 6px rgba(0,0,0,0.00)'
},
'*::-webkit-scrollbar-thumb': {
backgroundcolor: 'rgba(0,0,0,.1)',
outline: '1px solid slategrey'
}
}
});
it looks like the top-level/global selector to use is @global
.
score:0
this configuration works well for material ui v4 on modern chrome and firefox browsers.
const theme = createtheme({
overrides: {
muicssbaseline: {
'@global': {
'*': {
scrollbarwidth: 'thin',
scrollbarcolor: '#b7b7b7 transparent',
'&::-webkit-scrollbar': {
width: 6,
height: 6,
backgroundcolor: 'transparent',
},
'&::-webkit-scrollbar-track': {
backgroundcolor: 'transparent',
},
'&::-webkit-scrollbar-thumb': {
borderradius: 6,
backgroundcolor: '#b7b7b7',
minheight: 24,
minwidth: 24,
},
'&::-webkit-scrollbar-thumb:focus': {
backgroundcolor: '#adadad',
},
'&::-webkit-scrollbar-thumb:active': {
backgroundcolor: '#adadad',
},
'&::-webkit-scrollbar-thumb:hover': {
backgroundcolor: '#adadad',
},
'&::-webkit-scrollbar-corner': {
backgroundcolor: 'transparent',
},
},
},
},
},
});
score:0
in mui v5 for the specific element you can simply use:
<box sx={{
overflow:"auto",
scrollbarwidth: 'thin',
'&::-webkit-scrollbar': {
width: '0.4em',
},
'&::-webkit-scrollbar-track': {
background: "#f1f1f1",
},
'&::-webkit-scrollbar-thumb': {
backgroundcolor: '#888',
},
'&::-webkit-scrollbar-thumb:hover': {
background: '#555'
}
}}>
</box>
score:1
you don't even need to use createtheme
, just use globalstyles
in mui v5, this is more reusable:
<globalstyles
styles={{
'*::-webkit-scrollbar': {
width: '0.4em',
},
'*::-webkit-scrollbar-track': {
'-webkit-box-shadow': 'inset 0 0 6px rgba(0,0,0,0.00)',
},
'*::-webkit-scrollbar-thumb': {
backgroundcolor: 'rgba(0,0,0,.1)',
outline: '1px solid slategrey',
},
}}
/>
or if you want to use a scrollbar in dark theme, mui has one for you out-of-the-box:
import darkscrollbar from '@mui/material/darkscrollbar';
<globalstyles styles={{ ...darkscrollbar() }} />
live demo
score:1
update march 2022
in mui@5 the easiest way the achieve scroll adjusted to dark/light theme is to use color scheme in cssbaseline which works in chrome, edge & ff
https://mui.com/components/css-baseline/#color-scheme
<cssbaseline enablecolorscheme />
csb for thin scroller for light/dark mode for chrome, edge, ff & safari:
https://codesandbox.io/s/material-ui-toggle-dark-light-mode-scrollbar-t542f7?file=/demo.tsx
more details:
if you want nice thin scroll you can use scroll-width: "thin"
https://caniuse.com/mdn-css_properties_scrollbar-width
but for now in works only in ff
darkscrollbar from mui makes nice thin dark scrollbar in edge & chrome, but not in ff
darkscrollbar has also 3 available options, so we can combine those two methods and pass grey colors for light mode:
import { grey } from "@mui/material/colors";
import { darkscrollbar } from "@mui/material";
...
muicssbaseline: {
styleoverrides: {
html: {
...darkscrollbar(
mode === "light"
? {
track: grey[200],
thumb: grey[400],
active: grey[400],
}
: undefined
),
//scrollbarwidth for firefox
scrollbarwidth: "thin",
},
},
},
score:2
const usestyles = makestyles((theme) => ({
detailedcard: {
height: theme.spacing(60),
display: 'flex',
flexdirection: 'column',
overflow: 'scroll',
'&::-webkit-scrollbar': {
width:0.5px
},
'&::-webkit-scrollbar-thumb': {
width:0.5px
},
},
}))
score:4
the simplest one is to use the following code in your app.css file and import it to your app.js :
::-webkit-scrollbar {
width: 5px;
}
/* track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
score:11
none of the previous 4 answers gives a simple copy/paste solution that works right away for mui v4 or v5 and cssbaseline. so heres mine
for v4:
import { createtheme } from "@material-ui/core/styles";
const theme = createtheme({
overrides: {
muicssbaseline: {
"@global": {
body: {
scrollbarcolor: "#6b6b6b #2b2b2b",
"&::-webkit-scrollbar, & *::-webkit-scrollbar": {
backgroundcolor: "#2b2b2b",
},
"&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": {
borderradius: 8,
backgroundcolor: "#6b6b6b",
minheight: 24,
border: "3px solid #2b2b2b",
},
"&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus": {
backgroundcolor: "#959595",
},
"&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active": {
backgroundcolor: "#959595",
},
"&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover": {
backgroundcolor: "#959595",
},
"&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner": {
backgroundcolor: "#2b2b2b",
},
},
},
},
},
});
export default theme;
so, if you are using cssbaseline at the top of your app, then just put the overrides object into your global theme and it will work fine.
if you got your hands on the beta v5 of mui, then use this in your global theme:
// optional for better type support
import type {} from "@mui/lab/themeaugmentation";
import { createtheme } from "@mui/material/styles";
const theme = createtheme({
components: {
muicssbaseline: {
styleoverrides: {
body: {
scrollbarcolor: "#6b6b6b #2b2b2b",
"&::-webkit-scrollbar, & *::-webkit-scrollbar": {
backgroundcolor: "#2b2b2b",
},
"&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": {
borderradius: 8,
backgroundcolor: "#6b6b6b",
minheight: 24,
border: "3px solid #2b2b2b",
},
"&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus": {
backgroundcolor: "#959595",
},
"&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active": {
backgroundcolor: "#959595",
},
"&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover": {
backgroundcolor: "#959595",
},
"&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner": {
backgroundcolor: "#2b2b2b",
},
},
},
},
},
});
score:15
for me i just wanted to change the scrollbar settings globally, so based on the sample provided here: typography-html-font-size
you can use some approach like this for building your theme:
createmuitheme({
overrides: {
muicssbaseline: {
'@global': {
'*': {
'scrollbar-width': 'thin',
},
'*::-webkit-scrollbar': {
width: '4px',
height: '4px',
}
}
}
}
})
then just pass the created object to themeprovider
. themeprovider document
score:31
i would recommend to apply scrollbar styles only for the specific container, cause @global may take rendering time to apply on the all elements. this works fine as for me
list: {
overflowy: "auto",
margin: 0,
padding: 0,
liststyle: "none",
height: "100%",
'&::-webkit-scrollbar': {
width: '0.4em'
},
'&::-webkit-scrollbar-track': {
boxshadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
webkitboxshadow: 'inset 0 0 6px rgba(0,0,0,0.00)'
},
'&::-webkit-scrollbar-thumb': {
backgroundcolor: 'rgba(0,0,0,.1)',
outline: '1px solid slategrey'
}
}
Source: stackoverflow.com
Related Query
- MUI - How can I style the scrollbar with CSS in JS?
- I am trying to animate an object with css in react and change the animation (timing) dynamically, how can I set the style after animation end?
- Using SCSS, How can I give CSS style to a specific element among the elements with the same node position?
- How can I add style to the body element with JSS?
- How can I modify the default css / style of the auth buttons that firebase provides me?
- How can I change the style after mapping the array with js?
- How can I change the css property with styled components onClick?
- how to configure the style with css in a react project with an extern css-file
- How can I select all the classNames that ends with a given word in MUI sx property?
- How can I account for extra padding caused of the existence of a scrollbar with CSS?
- How can I override css style with className?
- How can I change the style of the icons in a map with openlayer and a geoJson file
- How can I use the css file from react-table in my react project along with css modules?
- How can I use one CSS module and adding just another style to it without rewriting the code?
- I created a button dynamic with the functional components, how I can get style and size from users as props
- How can i style specific button with css modules?
- With useEffect, how can I skip applying an effect upon the initial render?
- Invalid hook call. Hooks can only be called inside of the body of a function component when apply style to class base component with material-ui
- How can I enable react-i18n translation file to be used in the unit tests done with react-testing-library and jest?
- How to style child components in React with CSS Modules
- How can I develop locally using a domain name instead of 'localhost:3000' in the url with create-react-app?
- How can I change the color of a Link in React with Material-UI?
- How can I create a custom page with #react-admin without the menu sidebar like login page?
- How can I use CSS @media for responsive with makeStyles on Reactjs Material UI?
- How to reuse the same style rule with multiple selectors
- How can I test React component's style with Jest + Enzyme?
- How to get CSS style in snapshot with Jest
- How can I override the style of the Material-UI switch component when checked?
- How can I handle the change event with React-Hook-Form?
- Make cards and images the same size - how can I do it with CSS?
More Query from same tag
- Largest contentful paint is one big gatsby-background-image and very slow
- How to use wepb images in file-loader
- Unexpected token when initializing state in constructor
- react-dnd sortable list using custom drag layer
- Simplify toggle and setState updated item's property
- ReactJS unable to edit the textbox created through state variable
- Infinite for loop in useEffect when i want to check if a property of window object is here
- Why delete method doesn't work when post method does?
- Expand elipsis text of single mapped item
- How to run eslint in create react app
- How to keep a dynamic table row when it has no value?
- Unable to SetState in React Class using ReactTable Custom Header
- react-data-grid x-axis scroll issue
- How to combine React default styles with a style prop?
- How can I handle redux form submission in child component?
- I'm trying to manipulate the DOM by inserting 2 values
- Using Async/Await when calling methods of imported classes
- React useState giving previous state value always
- React: Avoiding Re-rendering Same Component on Routing
- Loading bar with percentage in React
- Reactjs How to download file from Azure Storage Container
- okta-auth-js Uncaught TypeError: Super expression must either be null or a function
- Is it possible to put a callback to useReducer's dispatch in React Hooks?
- How to line two buttons at each corner using flex in react js
- Cookie is not get saved in chrome even after setting sameSite:'none' and secure: true for a MERN stack web app
- React router dom v6, good way for nesting?
- Understanding unusable documentation of reactJS
- How to populate select dropdown elements with data from API - ReactJS
- getting input with select
- Mobile screen reader issue for react based applications