如何在 React 中自定义 Material UI？

Question

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

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

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

第二个是我不完全了解它是如何工作的。例如，他们有一个组件。但是要更改它的背景对我来说非常复杂，我必须在我的自定义 .css 文件上手动更改它。我无法使用 className，甚至使用 classes 属性也不起作用。

谁能更好地向我解释一下自定义是如何完成的？

Answer 1

您可以通过updating the theme 更改背景和其他颜色。这样您就可以自定义主要/次要背景和文本颜色，以及在您的样式中使用它们。

至于特定组件的自定义样式；这个想法是使用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 会将 props 中的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作为样式，选择tab时会应用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 的组件需要包装在withStyles(styles)(Component) 中。

这是一个live example，带有自定义主题，以及包含多个类的自定义按钮。