javascript - 如何在 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 作为 props 传递给包装的组件。

例子:

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。在这种情况下，样式 将包含:

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

请注意，这些使用的是选项卡的 CSS API , 以使用预定义的类名称映射自定义样式。

当然，带有 Tab 的组件需要包装在 withStyles(styles)(Component) 中。

这是一个 live example具有自定义主题，自定义按钮采用多个类。