Block Styling 块级样式

Within Editor, some block types are given default CSS styles to limit the amount of basic configuration required to get engineers up and running with custom editors.

在 Editor 中，一些块级类型被赋予了默认的 CSS 样式，来限制所需的基础配置的数量，以吸引工程师运行自定义的编辑器。

By defining a blockStyleFn prop function for an Editor, it is possible to specify classes that should be applied to blocks at render time.

通过定义一个 Editor 的 blockStyleFn 属性方法，使得在渲染时指定应该被应用的类名成为可能。

DraftStyleDefault.css

The Draft library includes default block CSS styles within DraftStyleDefault.css. (Note that the annotations on the CSS class names are artifacts of Facebook's internal CSS module management system.)

DraftStyleDefault.css 这个 Draft 的 lib 包含了默认的块级 CSS 样式。（ 注意那些在 CSS 类名上的注释是 Facebook 内部的 CSS 模块管理系统的人工产品 ）

These CSS rules are largely devoted to providing default styles for list items, without which callers would be responsible for managing their own default list styles.

这些 CSS 规则被大规模的投入，用来给列表项提供默认的样式。如果没有它们，调用者就需要负责自行管理它们的默认列表样式。

blockStyleFn

The blockStyleFn prop on Editor allows you to define CSS classes to style blocks at render time. For instance, you may wish to style 'blockquote' type blocks with fancy italic text.

Editor 上的 blockStyleFn 属性允许你在渲染时，定义 CSS 类来应用样式到 block 上。例如，你可能希望把花式斜体文字的样式应用到 “blockquote” 类型的 block 上。

function myBlockStyleFn(contentBlock) {
  const type = contentBlock.getType();
  if (type === 'blockquote') {
    return 'superFancyBlockquote';
  }
}

// Then...
import {Editor} from 'draft-js';
class EditorWithFancyBlockquotes extends React.Component {
  render() {
    return <Editor ... blockStyleFn={myBlockStyleFn} />;
  }
}

Then, in your own CSS:

然后，在你自己的 CSS 中：

.superFancyBlockquote {
  color: #999;
  font-family: 'Hoefler Text', Georgia, serif;
  font-style: italic;
  text-align: center;
}