StylesProvider

他和 Theme Provider 很像，其實就是用 context 在傳遞樣式 object 的方法。

import React from 'react';
import ReactDOM from 'react-dom';
import { StylesProvider } from '@material-ui/core/styles';

function App() {
  return (
    <StylesProvider jss={jss}>...</StylesProvider>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

ThemeProvider

這部分之前已經講解過了就不再贅述了，官方文件內有詳細的內容。

useTheme() => theme

這個 hook 之前的介紹也講解過了，返回了一個 theme ，你可以function component中使用它。

export default function MyComponent() {
  const theme = useTheme();

  return <div>{`spacing ${theme.spacing}`}</div>;
}

withStyles(styles, [options]) => higher-order component

使用 higher-order component 的模式與一個具有function component的樣式表相連。它不會修改傳遞給它的組件；相反的，它返回一個帶有 classes 屬性的新組件。這個 classes 對象包含了在 DOM 中註入的類名（class names）。
你可能會注意到一些有趣的細節：

• 它添加了一個 classes 屬性，這樣您可以從外部重寫注入的類名。
• 它將 refs 轉發給內部的組件。
• 而 innerRef 屬性已不再使用了改用 ref。
• 它不會拷貝靜態文件。例如，您可以用它來定義一個 getInitialProps() 的靜態方法 (next.js)。

接收參數格式

• styles(* Function | Object *)：和 makeStyles 一樣可以是 function 或是樣式 object。
• options (Object [optional])：
  • options.defaultTheme (Object [optional]): 如果 theme 不是通過 Theme Provider 提供的，則使用預設主題。
  • options.withTheme (Boolean [optional]): 預設為 false。將 theme object 提供給組件作為參數。
  • options.name (String [optional]): 樣式表的名稱。
  • options.flip (Boolean [optional]): 當設置為 false 時，此工作表將選擇退出 rtl 轉換。設置為 true 時，樣式反轉，當設置為 null 時，它遵循 theme.direction。
  • 接收規則 jss.createStyleSheet([styles], [options]).

Returns

higher-order component: 應該用於包裝組件。

const styles = {
  root: {
    backgroundColor: 'red',
  },
};

function MyComponent(props) {
  return <div className={props.classes.root} />;
}

export default withStyles(styles)(MyComponent);

withTheme(Component) => Component

提供 theme object 作為參數，以便組件可以渲染。

接收參數格式

Component: 將被包裝的組件。

Returns

Component: 新建的組件。

import React from 'react';
import { withTheme } from '@material-ui/core/styles';

function MyComponent(props) {
  return <div>{props.theme.direction}</div>;
}

export default withTheme(MyComponent);

那麼今天的內容就到這邊了，至此相信大家對這個UI庫已經有一些基本的認識了吧，明天會講解 Customization (自訂) 組件的部分。