在使用 (Material UI) withStyles 而不是 React 中的默认道具“类”时创建自定义道具？答案

【问题标题】：Creating custom prop while using (Material UI) withStyles instead of the default prop `classes` in React?在使用 (Material UI) withStyles 而不是 React 中的默认道具“类”时创建自定义道具？
【发布时间】：2019-12-11 23:31:48
【问题描述】：

所以，每当我使用 withStyles 时，它都会创建一个名为 - (this.props.{classes}) 的默认道具，如果我使用 withTheme 它会创建 -(this.props.{主题}）。

问题 1

这里的主题属性是包含与我正在使用的 MaterialUI 组件相关的主题数据，还是仅包含所有组件的主题数据？

问题 2

我的第二个问题是，如果我想将这些道具存储到单个对象中，例如 *this.props.header.classes and this.props.header.theme*。可以这样做吗？

问题 3

我的第三个问题是，类名是如何在内部定义的？据我说，他们可能正在使用像classnames 或clsx 这样的库。我说的对吗？

示例

这是为组件 appBar 创建的类名 - App-appBar-2

我认为是 appBar，因为那是样式对象中样式键的名称。
这里的数字2有什么意义吗？

这里是样式的sn-p


const headerStyles = theme => ({
  root: {
    display: "flex"
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
    transition: theme.transitions.create(["width", "margin"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen
    })
  },
   ...
   ...
)}

我有什么-

props = {
 classes,
 theme,
 ...
}

我打算拥有的是-

props = {
 header: {
  classNames: classes,
  theme: theme
 },
 ...
}

感谢任何帮助。

【问题讨论】：

标签： reactjs react-redux material-ui

【解决方案1】：

答案 1：这是您的主题提供商上游提供的整个主题。答案 2：这只能通过使用第二个高阶组件（不推荐）来实现，它将它的道具包装成单独的标题道具。答案3：docs中提到了类名组成希望这可以帮助。编码愉快。

【讨论】：