如何在React中自定義Material UI？

Question

我對將這個UI框架與React一起使用非常陌生。 我被分配去開發一個應該具有更多設計模式的應用程序，我選擇了一個也不依賴於Jquery代碼的框架。 但是，我正在努力定制預制組件。 他們在他們的網站上有一個替代部分，但我不太了解。

我知道有兩種自定義元素的方法

1. 您可以創建一個const styles = theme => { styles here } 。 然后，調用一個名為withStyles的高階組件。 那么定義的css屬性將在prop classes上可用。
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將把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用作要應用的樣式，並且在selected選項卡時將應用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) 。

這是一個帶有自定義主題的實時示例 ，並且自定義按鈕具有多個類別。