如何在React中自定义Material UI？

Question

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

我知道有两种自定义元素的方法

1. 您可以创建一个const styles = theme => { styles here }。然后，调用一个名为withStyles的高阶组件。那么定义的css属性将在classesprop 上可用。
2. 您还可以使用classes属性更改内部组件，例如：<Drawer classes={x}>。

第二个是我不清楚它是如何工作的。例如，它们具有一个组件。但是要为我更改背景非常复杂，我必须在自定义.css文件中手动进行更改。我不能使用className，甚至无法使用classes属性。

谁能更好地向我解释定制的完成方式？

Answer 1

您可以通过更新主题来更改背景和其他颜色。这样，您可以自定义主要/辅助背景和文本颜色，以及在样式中使用它们。

至于特定组件的自定义样式；这个想法是withStyles用作包装组件的高阶组件。它以theme参数为参数，并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);

该withStyles会通过styles在道具的classes，然后就可以使用它们。如果您使用的是功能组件，则可以通过进行访问props.classes，如果要扩展Component，它们将位于this.props.classes

如果希望使用多个类，则需要安装classnames依赖项并导入它：

import React from 'react';
import { withStyles } from '@material-ui/core/styles/withStyles';
import classNames from 'classnames';


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

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

export default withStyles(styles)(MyComponent);

该classes属性还可以用于设置多个类，但这取决于Material-UI组件样式API。例如，对于Tab组件

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

采用root如默认要应用的样式，并且selected被选择的标签时将被应用。在这种情况下，styles将包含：

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

请注意，它们使用Tab的CSS API来映射具有预定义类名的自定义样式。

而且，当然Tab需要将的Component 包装在中withStyles(styles)(Component)。

这是一个带有自定义主题的实时示例，并且自定义按钮具有多个类别。