Question

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

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

您可以创建一个const styles = theme => { styles here }。然后，调用一个名为withStyles的高阶组件。那么定义的css属性将在classes道具上可用。
您还可以使用classes属性来更改内部组件，例如：<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将在道具中传递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
  },
};

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

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

这是一个live example，具有自定义主题，并且自定义按钮具有多个类别。

如何在React中自定义Material UI？

1 个答案: