reactjs 如何自定义物料界面中的滚动条？

xeufq47z 于 5个月前发布在 React

关注(0)|答案(2)|浏览(52)

我正在使用Material-UI来扩展我的React项目，但是我不能更改mui组件中的滚动条。这是我在mui集成之前使用的css：

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

字符串
在使用mui后，我意识到css在使用mui组件（如<Box/>或<Drawer/>）时会被mui自己的样式覆盖。我还使用了mui的<ThemeProvider/>，主题如下：

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

型
在尝试了mui文档中的CSS基线覆盖后，我无法得到任何结果，但也无法确认问题所在，因为我对mui的样式的理解有限，而且CSS基线滚动条被标记为已弃用。
我怎么能集成上面显示的css滚动条样式到一个mui组件或mui主题？

reactjs

来源：https://stackoverflow.com/questions/70646422/how-to-customize-scrollbar-in-material-ui

2条答案

按热度按时间

egdjgwm81#

在我的例子中，我需要父类和webkit，像这样（日历组件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'
          },
        }
      }
}

字符串

赞(0）回复(0）举报 5个月前

monwx1rj2#

我使用的是MUI版本5，对我来说，在CssBaseline中添加enableColorScheme是可行的。

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

function App() {
  // Use the useMediaQuery hook to check if the user prefers dark mode
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

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

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

export default App;

字符串

赞(0）回复(0）举报 5个月前

我来回答

reactjs 如何自定义物料界面中的滚动条？

2条答案

相关问题

热门标签

最新问答