Material ui 的 makeStyles 中的动态值答案

【问题标题】：Dynamic values in material ui's makeStylesMaterial ui 的 makeStyles 中的动态值
【发布时间】：2020-07-12 13:00:06
【问题描述】：

我在数据库中存储了一些样式，因此用户可以重新设置其组件的样式 - 如下所示：

const stylesFromDatabase = {
backgroundColor: "blue",
color: "red"
}

是否可以将这些样式带入 Material UI 的 makeStyles - 可能是这样的？- 已编辑 -

    const useStyles = makeStyles(theme => ({
    textField: stylesFromDatabase => ({
    width: "100%",
    ...stylesFromDatabase
  }),

或者，我可以使用什么来将 makeStyles 生成的类和一个 javascript 对象融合在一起？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

是的，
绝对可以在makeStyles 中包含JavaScript 对象。
感谢spread 运算符。

建议先铺展对象，这样您就可以轻松覆盖任何样式。
因此，最好按照以下方式进行。

const useStyles = makeStyles(theme => ({
  textField: {
    ...stylesFromDatabase,  // object
    width: "100%",
    color: "green", // this would override "red" (easier fine tuning)
  },
});

【讨论】：

嗯，我知道您来自哪里，但这会将样式带到我尝试设置样式的 textField 之外。我已经编辑了我的原始 q 以显示我现在正在尝试的内容，但仍然无法让它工作。顺便说一句，我没有忘记传入 stylesFromDatabase。
好的，从您的编辑开始。您只想将该对象专门传递给textField，对吗？
是的，我想传递数据库中的所有值（我帖子的第一个块）。
请查看我的更新答案。您不一定需要回调函数。我们可以直接在textField 内覆盖对象spread。该语法应该很好地满足您的目的。
感谢您的帮助 :) 为了以后发帖者的利益，我原来的帖子中的代码运行良好，我只是后来有一些东西覆盖了它！（没有回调函数是未定义的）

【解决方案2】：

为了以后发帖者的利益，我原来帖子中的代码运行良好，我只是后来有一些东西覆盖了它！（如果没有回调函数，它是未定义的）——H Capello 只是

【讨论】：

好吧，与其添加新的答案，不如编辑您的问题并将这句话添加到该问题的末尾？