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

【问题标题】：Can I add pseudo element objects to Material UI custom theme config?我可以将伪元素对象添加到 Material UI 自定义主题配置吗？
【发布时间】：2020-08-17 03:21:54
【问题描述】：

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

themeConfig.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 属性分配，我不知道如何优雅地将这样的整个样式对象应用于组件。非常感谢任何建议！

【问题讨论】：

标签： javascript css reactjs material-ui themes

【解决方案1】：

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

这是一个工作示例：

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

【讨论】：