Material UI in React [ Day 26 ] Styles API (part 1)

2021 iThome 鐵人賽

DAY 26

自我挑戰組

Material UI in React系列第 26 篇

13th鐵人賽

LucianoLee

2021-09-27 19:49:04

1412 瀏覽

分享至

API

今天來釐清 @material-ui/core/styles 的 API。

createGenerateClassName([options]) => class name generator

一個返回類名生成器函數的函數。

接收參數格式

options (Object [optional]):

options.disableGlobal(Boolean [optional]): 預設值為 false，禁用確定性類名的生成。
options.productionPrefix(String [optional]): 預設值為 'jss'，用於在生產中作為類名前綴的字串。
options.seed (String [optional]): 預設為 ''，用於唯一標識生成器的字串。在同一個文檔中使用多個生成器時，可以用來避免類名衝突。

Returns

class name generator: 提供給 JSS。

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

const generateClassName = createGenerateClassName({
  productionPrefix: 'c',
});

export default function App() {
  return (
    <StylesProvider generateClassName={generateClassName}>...</StylesProvider>
  );
}

createStyles(styles) => styles

這個函數在運行時並沒有真正“做任何事情”，它只是身份函數，唯一目的是在為主題的函數 makeStyles/withStyles 提供樣式規則時阻止 TypeScript 的類型擴展。

接收參數格式

styles (Object): 樣式Object.

Returns

styles: 樣式Object.

import { makeStyles, createStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme: Theme) => createStyles({
  root: {
    backgroundColor: theme.color.red,
  },
}));

export default function MyComponent {
  const classes = useStyles();
  return <div className={classes.root} />;
}

makeStyles(styles, [options]) => hook

這就是我們之前範例常常使用的 hook。

接收參數格式

styles (Function | Object): 生成樣式或樣式對象的函數，它將鏈接到組件。如果您需要連接theme，請使用匿名函式，將它作為第一個參數提供。
options (Object [optional]):
- options.defaultTheme (Object [optional]): 如果主題不是通過ThemeProvider提供的，則使用默認主題。
- options.name (String [optional]): 樣式表的名稱。
- options.flip (Boolean [optional]): 當設置為 false 時，此工作表將選擇退出 rtl 轉換。設置為 true 時，樣式反轉，當設置為 null 時，它遵循 theme.direction。
- 接收規則 jss.createStyleSheet([styles], [options]).

Returns

hook: 可以在functional component 中使用。

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

const useStyles = makeStyles({
  root: {
    backgroundColor: 'red',
    color: props => props.color,
  },
});

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

ServerStyleSheets

這是一個處理服務器端渲染的類助手，實用範例。

import ReactDOMServer from 'react-dom/server';
import { ServerStyleSheets } from '@material-ui/core/styles';

const sheets = new ServerStyleSheets();
const html = ReactDOMServer.renderToString(sheets.collect(<App />));
const cssString = sheets.toString();

const response = `
<!DOCTYPE html>
<html>
  <head>
    <style id="jss-server-side">${cssString}</style>
  </head>
  <body>${html}</body>
</html>
`;

styled(Component)(styles, [options]) => Component

使用樣式組件模式將樣式表與功能組件鏈接起來。

接收參數格式

Component: 需要使用style的組件。
styles (Function | Object): 生成樣式或樣式對象的函數，它將鏈接到組件。如果您需要連接theme，請使用匿名函式，將它作為第一個參數提供。
options (Object [optional]):
- options.defaultTheme (Object [optional]): 如果主題不是通過ThemeProvider提供的，則使用默認主題。
- options.withTheme (Boolean [optional]): 預設值為false，將主題對像作為屬性提供給組件。
- options.name (String [optional]): 樣式表的名稱。
- options.flip (Boolean [optional]): 當設置為 false 時，此工作表將選擇退出 rtl 轉換。設置為 true 時，樣式反轉，當設置為 null 時，它遵循 theme.direction。
- 接收規則 jss.createStyleSheet([styles], [options]).

Returns

Component: 建立一個新的 component。

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

const MyComponent = styled('div')({
  backgroundColor: 'red',
});

const MyThemeComponent = styled('div')(({
  theme
}) => ({
  padding: theme.spacing(1),
}));

export default function StyledComponents() {
  return (
    <MyThemeComponent>
      <MyComponent />
    </MyThemeComponent>
  );
}

那麼今天的內容就到這邊，明天還會接續講解後面的 API。