2

我正在尝试重现Slate Examples中显示的示例。除了工具栏的外观，我拥有编辑器和所有功能。我已经导入了 'emotion' 和 'react-emotion' 库。但我没有看到呈现的图标，而是看到代替它们的文本： 在此处输入图像描述

我在定义图标的“components.js”中看到以下代码：

export const Icon = styled(({ className, ...rest }) => {
return <span className={`material-icons ${className}`} {...rest} />
})`
font-size: 18px;
vertical-align: text-bottom;

` 是否需要导入任何其他库才能显示图标或进行任何其他配置？

4

2 回答 2

4

您还可以包含材质 ui 图标样式。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
于 2018-10-08T22:19:53.447 回答
1

Slate 工具栏示例在某种意义上实际上与核心 slate 逻辑本身是分开的——它们只是您可以使用 Slate 函数做什么的示例，应该用于它们的逻辑，而不一定用于它们的设计。

我同意它没有很好地记录，但工具栏并不意味着逐字复制，因为它们依赖于模块捆绑和它们自己的构建配置（参见Slate 存储库中的package.jsonand文件夹），这使得类引用可以替换为定义的图形。他们还使用 css-in-js库。IMO，尝试完全模拟它们会很痛苦（除非你有完全相同的构建配置——极不可能），所以我会尝试使用你自己的图形/css/ui 库来设计你自己的工具栏选择。由于它实际上只是一排按钮，因此使用您喜欢的任何东西来旋转几乎与他们相同的东西应该很快。supportmaterial-uicssstyled

如果您特别喜欢它们使用的元素，您当然可以使用自己的捆绑方法将它们包含在内。我相信https://www.npmjs.com/package/@material-ui/icons包包含所有材质图标，您可以从中导入所需的内容。

于 2018-09-04T15:47:41.913 回答