Question

编辑：找到了解决方案here

尝试为Sharepoint Online创建WebPart。我想将织物核心库样式用于布局和字体，但是我的代码未从className中选取样式。

我检查了文档，以查看是否需要添加某些内容，或者是否缺少我需要安装的任何更新。由于在我其他三个月前的项目中运行良好，并且我具有相同的代码库。

我当时使用的是SPFx的较新版本，但在补丁说明中看不到任何有关它的信息

<div className="ms-Grid" dir="ltr">
    <div className="ms-Grid-row">
        <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg6">
            <HighlightedNewsItem newsArticle={this.props.newsArticles[0]} />
        </div>
        <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg6">
            <HighlightedNewsItem newsArticle={this.props.newsArticles[1]} />
        </div>
    </div>
</div>

我的进口如下：

import * as React from 'react'; 
import * as strings from 'NewsFeedWebPartStrings'; 
import styles from '../NewsFeed.module.scss'; 
import { INewsFeedContentProps, INewsFeedContentState } from '.'; 
import { HighlightedNewsItem } from './HighlightedNewsItem/index';

我的package.json看起来像这样

{
  "name": "client-side-solution",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@microsoft/sp-core-library": "1.8.0",
    "@microsoft/sp-lodash-subset": "1.8.0",
    "@microsoft/sp-office-ui-fabric-core": "^1.8.0",
    "@microsoft/sp-property-pane": "1.8.0",
    "@microsoft/sp-webpart-base": "1.8.0",
    "@pnp/spfx-controls-react": "1.12.0",
    "@pnp/spfx-property-controls": "1.14.1",
    "@types/es6-promise": "0.0.33",
    "@types/react": "16.7.22",
    "@types/react-dom": "16.0.5",
    "@types/webpack-env": "1.13.1",
    "office-ui-fabric-react": "^6.165.0",
    "react": "16.7.0",
    "react-dom": "16.7.0"
  },
  "resolutions": {
    "@types/react": "16.4.2"
  },
  "devDependencies": {
    "@microsoft/rush-stack-compiler-3.2": "0.3.6",
    "@microsoft/sp-build-web": "1.8.0",
    "@microsoft/sp-module-interfaces": "1.8.0",
    "@microsoft/sp-tslint-rules": "1.8.0",
    "@microsoft/sp-webpart-workbench": "1.8.0",
    "@types/chai": "3.4.34",
    "@types/mocha": "2.2.38",
    "ajv": "~5.2.2",
    "gulp": "~3.9.1",
    "typescript": "3.2.4"
  }
}

我希望将织物布局样式应用于我的代码，但事实并非如此。 Layout documentation

Answer 1

要在现有项目中使用Fabric Core软件包，请将该软件包作为依赖项安装：

npm install @microsoft/sp-office-ui-fabric-core --save

要使用Fabric Core样式，您需要将SPFabricCore声明导入到Sass文件中。

@import'~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';

注意：确保已安装 @ microsoft / sp-office-ui-fabric-core npm软件包。

您可以从这里检查。 => https://docs.microsoft.com/en-us/sharepoint/dev/spfx/office-ui-fabric-integration

React className未从Fabric ui中选取样式

1 个答案: