Reactjs 材质UI中的样式

我正在努力学习如何使用材质UI，但有时会被所有的括号和花括号卡住。仅仅改变一件简单的事情就有点让人不知所措。有没有人能解释一下这行代码的真正含义，以及作者在这里的目标是什么

    const useStyles = makeStyles(({ palette }) => ({
  color: ({ color }: { color: string }) => ({
    "&:before": {
      backgroundColor: Color(color).darken(0.3).desaturate(0.2).toString()
    }
  }),
  content: ({ color }: { color: string }) => ({
    position: "relative",
    zIndex: 1,
  }));

---

这取决于作者试图设计的组件，每个组件的API中都有一个部分，描述如何应用每个规则以及dom元素的目标

如果您对短箭头函数感到困惑，您可以用更详细的方式重写它们，比如添加一些

{}

和return语句，并将类型移到外部

接口组件{
颜色：字符串；
}
...
const useStyles=makeStyles（（主题）=>{
返回{
颜色：（{color}:ComponentProps）=>{
返回{
“&：之前”：{
背景颜色：颜色（道具颜色）
.变暗（0.3）
.去饱和（0.2）
.toString（），
},
};
},
内容：（{color}:ComponentProps）=>{
返回{
职位：“相对”，
zIndex:1，
};
},
};
});

要提供准确答案，我们需要知道这些样式应用于哪个组件