我可以将伪元素对象添加到 Material UI 自定义主题配置中吗？

Question

在我的文件中，themeConfig.js我声明了一些主题变量，我在整个应用程序中使用这些变量来设置各种组件的样式。我需要使用滚动条-webkit来保留某些组件的滚动条。这些-webkit样式又长又大，所以我希望能够将它们添加到我的themeConfig.js文件中。这些滚动条样式是伪元素，虽然我可以分配它们，但我无法弄清楚如何在themeConfig.js.

主题配置.js

const myTheme = createMuiTheme({
  layout: {
    header: 64,
    sideNav: 45,
    mainDivHeight: 250,
    ...
  }
})

export default myTheme

ComponentExample.js

import { makeStyles } from '@material-ui/core'

const ComponentExample = () => {
  const classes = useStyles()

  return (
    <div className={classes.mainDiv}>I'm a div</div>
  )
}

const useStyles = makeStyles(theme => ({
  mainDiv: {
    height: theme.layout.mainDivHeight,
    overflowY: 'scroll',
    '&::-webkit-scrollbar': {
      width: 8,
    },
    '&::-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,.2)',
      outline: '1px solid slategrey',
      borderRadius: 7,
    },
  }
}))

export default ComponentExample

如果我可以将其填充到主题文件中的变量中并将其应用到组件，那就太好了：

    overflowY: 'scroll',
    '&::-webkit-scrollbar': {
      width: 8,
    },
    '&::-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,.2)',
      outline: '1px solid slategrey',
      borderRadius: 7,
    },

但是主题样式的声明方式makeStyles是 1:1 属性分配，我不知道如何优雅地将整个样式对象应用到组件。任何意见是极大的赞赏！

Answer 1

声明的样式makeStyles位于一个对象内，并且该对象可以用 JavaScript 支持的任何方式构造。我处理这个问题的方法是将您想要在主题中的单个对象中使用的样式（在scrollbarStyles下面的示例中），然后在您想要在.makeStyles

这是一个工作示例：

import React from "react";
import {
  createMuiTheme,
  ThemeProvider,
  makeStyles
} from "@material-ui/core/styles";

const myTheme = createMuiTheme({
  layout: {
    header: 64,
    sideNav: 45,
    mainDivHeight: 250,
    scrollbarStyles: {
      overflowY: "scroll",
      "&::-webkit-scrollbar": {
        width: 8
      },
      "&::-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,.2)",
        outline: "1px solid slategrey",
        borderRadius: 7
      }
    }
  }
});

const useStyles = makeStyles(theme => ({
  mainDiv: {
    ...theme.layout.scrollbarStyles,
    height: theme.layout.mainDivHeight
  }
}));
function ComponentExample() {
  const classes = useStyles();

  return (
    <div className={classes.mainDiv}>
      <div style={{ margin: "50px" }}>
        I'm a div with enough content to make me scroll
      </div>
      <div style={{ margin: "50px" }}>
        I'm a div with enough content to make me scroll
      </div>
      <div style={{ margin: "50px" }}>
        I'm a div with enough content to make me scroll
      </div>
      <div style={{ margin: "50px" }}>
        I'm a div with enough content to make me scroll
      </div>
      <div style={{ margin: "50px" }}>
        I'm a div with enough content to make me scroll
      </div>
    </div>
  );
}
export default function App() {
  return (
    <ThemeProvider theme={myTheme}>
      <ComponentExample />
    </ThemeProvider>
  );
}