如何将 Office UI Fabric 全局排版规则与 Office ui Fabric React 应用程序一起使用？答案

【问题标题】：How to use OfficeUI Fabric global typography rules with officeui fabric react app?如何将 Office UI Fabric 全局排版规则与 Office ui Fabric React 应用程序一起使用？
【发布时间】：2019-05-30 02:03:09
【问题描述】：

我对在 react 应用程序中使用织物排版感到困扰。

我想构建一个看起来像 Fabric 的应用。

如何获取排版规则？

特别是，我希望 <h1>,<h2> 标签看起来像织物标题。

我尝试从我的全局布局组件中导入 css，但标题仍然是原始的。

import 'office-ui-fabric-react/dist/css/fabric.min.css';

我也尝试使用

引用CDN css文件

<link
    rel="stylesheet"
    href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css"
    />

但还是没有成功。

[编辑]请注意，在组件内应用样式。例如，Dialog 组件中的 h1 标记将按预期显示。

[/编辑]

【问题讨论】：

标签： office-ui-fabric

【解决方案1】：

您只能使用https://developer.microsoft.com/en-us/fabric#/styles/typography 中定义的排版，确保为所需的标题放置正确的类名。并确保使用ms-Fabric 包装html。如果您正在使用 react，<Fabric> 也会为您执行此操作。

例如：

    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css">

    <body class="ms-Fabric">
       <h1 class="ms-font-xl">Hello World</h1>
       <h1 class="ms-font-su">Hello World</h1>
    </body>

有两种方法可以包含 Fabric Core。

通过 CDN，示例 CDN 为 https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css 或 https://unpkg.com/office-ui-fabric-react@6.119.0/dist/css/fabric.min.css（使用产品就绪的 CDN）
通过 NPM，一旦你在 index.css 或 index.sass 中的 yarn add office-ui-fabric-react 或 npm install office-ui-fabric-react 导入它。 Webpack 将确保它正确打包所有内容。

css： @import '../node_modules/office-ui-fabric-react/dist/css/fabric.css';

萨斯： @import '../node_modules/office-ui-fabric-react/dist/sass/Fabric';

注意：这将带来所有面料样式（这是唯一的方法），稍后，Fabric 团队表示他们将创建组件而不是这样做。

就是这样

【讨论】：

谢谢。你给我指出了正确的方向。我能够通过像h1 { @extend .ms-font-su; } 这样的 sass 规则defaulting 标头行为来模仿我想要的。这样所有 h1 的行为都符合我的预期