代码之家 › 专栏 › 技术社区 › Steve B

如何在OfficeUI Fabric React应用程序中使用OfficeUI Fabric全局排版规则?

office-ui-fabric

0

Steve B · 技术社区 · 6 年前

我对在React应用程序中使用织物版式感到很困惑。

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

如何获得排版规则?

尤其是,我想 <h1> , <h2> 标签看起来像织物标题。

我试图从全局布局组件导入CSS,但头仍然是原始的。

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

我还尝试使用

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

但仍然没有成功。

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

[/编辑]

1 回复 | 直到 6 年前

1

0

Mohamed Mansour 6 年前

您只能使用 https://developer.microsoft.com/en-us/fabric#/styles/typography ,确保为所需的头放置正确的类名。并确保用 ms-Fabric . 如果你在使用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 (使用产品就绪的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';

注: 这将带来所有的面料风格(这是唯一的方法),稍后,面料团队表示他们将创建组件而不是这样做。

这就是全部