Javascript 如何在React中自定义材质UI？

我对使用这个UI框架和React非常陌生。我被分配去开发一个应该有更多设计模式的应用程序，我选择了一个也不依赖Jquery代码的框架。然而，我正在努力定制预先制作的组件。他们的网站上有一个覆盖部分，但我不是很了解

我知道定制元素有两种方法

您可以创建一个

constyles=theme=>{styles here}

。然后调用一个名为withStyles的高阶组件。然后定义的css属性将在

classes

prop上可用

您还可以使用“类”属性更改内部组件，例如：

第二个是我不太明白它是怎么工作的。例如，他们有一个组件。但是要改变它的背景对我来说非常复杂，我必须在我的自定义.css文件中手动改变它。我不能使用className，甚至使用classes属性也不行

---

有没有人能更好地向我解释一下定制是如何完成的？

背景和其他可以改变的颜色。这样，您可以自定义主/次背景和文本颜色，并在样式中使用这些颜色

对于特定组件的自定义样式；其思想是将

与样式一起使用

作为高阶组件，包装组件。它将

主题

作为参数，并将

类

作为道具传递给包装组件

例如：

import { withStyles } from '@material-ui/core/styles/withStyles';

const styles = theme => ({
  someClass: {
    padding: theme.spacing.unit * 5
  },
  otherClass: {
    background: 'red'
  }
});

定义样式后，可以在组件中使用它们，如下所示：

const MyComponent = (props) => {
  return (<Button className={props.classes.someClass}>Some Action</Button>)
}

export default withStyles(styles)(MyComponent);

classes

属性也可用于设置多个类，但这取决于材质UI组件样式API。例如，对于

选项卡

组件

<Tab label="Hello" classes={ { root: classes.tab, selected: classes.tabSelected }} />

请注意，这些是使用选项卡来映射具有预定义类名的自定义样式

当然，带有

选项卡的组件需要用
和样式（样式）（组件）
包装起来

这是一个带有自定义主题和自定义按钮的多个类。
我永远也不知道这是如何被标记为正确答案的！谢谢
<Tab label="Hello" classes={ { root: classes.tab, selected: classes.tabSelected }} />

const styles = theme => ({
  tab: {
    minWidth: 'auto',
    fontSize: '11px',
    fontWeight: 'bold'
  },
  tabSelected: {
    background: theme.palette.background.paper,
    color: theme.palette.secondary.main
  },
};