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。

<<: [DAY-13] 走向全球

>>: 第27天 - 文件审核系统(5)_审核端1