iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
自我挑戰組

Material UI in React系列 第 27

Material UI in React [ Day 27 ] Styles API (part 2)

StylesProvider

他和 Theme Provider 很像,其實就是用 context 在傳遞樣式 object 的方法。
https://ithelp.ithome.com.tw/upload/images/20210928/20129020G6MtZqmO5G.png

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

這部分之前已經講解過了就不再贅述了,官方文件內有詳細的內容。
https://ithelp.ithome.com.tw/upload/images/20210928/20129020ddSzc8ARgm.png

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 (自訂) 組件的部分。


上一篇
Material UI in React [ Day 26 ] Styles API (part 1)
下一篇
Material UI in React [ Day 28 ] Customization Component 自訂組件 (part1)
系列文
Material UI in React30

尚未有邦友留言

立即登入留言