文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用OfficeUI织物全局排版规则与办公用布反应应用？

问如何使用OfficeUI织物全局排版规则与办公用布反应应用？
EN

Stack Overflow用户

提问于 2019-01-03 13:13:23

回答 1查看 697关注 0票数 0

我很困扰在一个反应应用程序中使用织物排版。

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

如何获得排版规则？

特别是，我希望<h1>、<h2>标记能够查看fabric标头。

我尝试从全局布局组件导入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"
    />

但还是没有成功。

EditPlease注意，在组件中应用了样式。例如，h1组件中的一个Dialog标记将按预期显示。

/Edit

office-ui-fabric

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-01-03 13:54:21

您只能使用在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现成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'; sass: @import '../node_modules/office-ui-fabric-react/dist/sass/Fabric'; 注意：-这将带来所有的面料风格(这是唯一的方式)，后来，面料团队声明，他们将创建组件，而不是这样做。

就这样

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54023016

复制

相似问题

问如何使用OfficeUI织物全局排版规则与办公用布反应应用？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用OfficeUI织物全局排版规则与办公用布反应应用？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用OfficeUI织物全局排版规则与办公用布反应应用？
EN