Question

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

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

如何获取排版规则？

特别是，我希望<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"
    />

但仍然没有成功。

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

[/编辑]

Answer 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>

有两种方法可以包含结构核心。

通过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（使用Prod ready CDN）
通过NPM，一旦您yarn add office-ui-fabric-react或npm install office-ui-fabric-react中的index.css或index.sass，就可以将其导入。 Webpack将确保正确打包所有内容。

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

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

注意：这将带来所有织物样式（这是唯一的方法），随后，织物团队声明将创建组件，而不是这样做。

仅此而已

如何在OfficeUI Fabric React App中使用OfficeUI Fabric全局排版规则？

1 个答案: