Могу ли я добавить объекты псевдоэлемента в конфигурацию пользовательской темы 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 в моем примере ниже), а затем использовать синтаксис распространения объекта в том месте, где вы хотите использовать его в пределах 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>
  );
}