Реагируйте на className, не выбирая стиль из Fabric ui - PullRequest
Новая
       18

Реагируйте на className, не выбирая стиль из Fabric ui

0 голосов
/ 11 апреля 2019

Редактировать: найдено решение здесь

Попытка создать WebPart для Sharepoint Online.Я хочу использовать стили библиотеки ядра ткани для макета и шрифтов, но мой код не выбирает стили из className.

Я проверил документацию, чтобы увидеть, нужно ли мне что-то включать или есть какие-то обновления, которые мне здесь не хватает, которые мне нужно установить.Поскольку он отлично работал на моем другом проекте 3 месяца назад, и у меня та же самая база кода.

Я нахожусь на более новой версии 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"
  }
}

Я хочу, чтобы стиль компоновки ткани применялся к моему коду, но это не так. Макетная документация

1 Ответ

0 голосов
/ 11 апреля 2019

Чтобы использовать пакет 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

...