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

Question

在我的文件 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 属性赋值，我不知道如何优雅地将整个样式对象应用到一个组件。非常感谢任何建议！

Answer 1

在 makeStyles 中声明的样式在一个对象中，并且可以用 JavaScript 支持的任何方式构造该对象。我处理这个问题的方法是将你想要使用的样式放在主题中的单个对象中（scrollbarStyles 在我下面的例子中）然后在你想要使用的地方使用 object spread syntax它在 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>
  );
}

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

Can I add pseudo element objects to Material UI custom theme config?

javascript

css

themes

reactjs

material-ui