iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
自我挑戰組

Material UI in React系列 第 26

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

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。


上一篇
Material UI in React [ Day 25 ] Styles Advanced
下一篇
Material UI in React [ Day 27 ] Styles API (part 2)
系列文
Material UI in React30

尚未有邦友留言

立即登入留言