如何将 OfficeUI Fabric 全局排版规则与 officeui fabric react 应用程序一起使用？

Question

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

我想构建一个看起来像 fabric 的应用程序。

如何获取排版规则？

特别是，我想要 <h1>、<h2> 标签看起来面料 headers。

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

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 标记将按预期显示。

[/编辑]

Answer 1

您只能使用 https://developer.microsoft.com/en-us/fabric#/styles/typography 中定义的版式，确保为您想要的 header 放置正确的 class 名称。并确保用 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 or 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';

sass: @import '../node_modules/office-ui-fabric-react/dist/sass/Fabric';

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

就这些了

如何将 OfficeUI Fabric 全局排版规则与 officeui fabric react 应用程序一起使用？

How to use OfficeUI Fabric global typography rules with officeui fabric react app?

office-ui-fabric