时间戳

首页 > 解决方案 > 在 material-ui v5 中应用全局样式的最佳方法是什么？

html - 在 material-ui v5 中应用全局样式的最佳方法是什么？

问题描述

我正在为我的项目使用 Material-UI v5。我需要使用以下 css 设置滚动条的样式

  body::-webkit-scrollbar {
    width: 12px;
  }
  body::-webkit-scrollbar-track {
    background: blue;
  }
  body::-webkit-scrollbar-thumb {
    background-color: red;
    border: 3px solid black;
    border-radius: 10px;
  }

我尝试使用 makeStyles 如下：

const useStyles = makeStyles((theme: Theme) => ({
    root: {
        background: theme.palette.primary.main,
        'html': {
            scrollbarWidth: 'thin',
            scrollbarColor: theme.palette.accent.main
        },
        'body::-webkit-scrollbar': {
            width: '12px'
        },
        'body::-webkit-scrollbar-track' : {
            background: theme.palette.primary.main,
        }
    },
}));

但是当我检查实际源 css 时，它是'body::-webkit-scrollbar' : Object[object].

我被困在如何在 material-ui 中添加像这样的全局 css 以及执行此操作的最佳方法是什么。

也请让我知道，以防我在这里做错了什么。提前致谢。

标签： htmlcssreactjsmaterial-ui

解决方案

推荐阅读