Как изменить шрифт в fabric-ui - PullRequest
Новая
       9

Как изменить шрифт в fabric-ui

0 голосов
/ 14 декабря 2018

Просто добавление className в тег не помогает 

                        <p className="ms-font-m">
                            sometext
                        </p>

не меняет шрифт

https://developer.microsoft.com/en-us/fabric#/styles/typography

Ответы [ 2 ]

0 голосов
/ 18 декабря 2018

Если вы хотите использовать CSS-классы Fabric Core напрямую, а не с CSS-in-JS, вам необходимо включить CSS на своей странице, следуя инструкциям по началу работы с Fabric Core :

  1. Добавьте ссылку на таблицу стилей в <head> вашей страницы.Самый простой способ - использовать копию в CDN от Microsoft (захватите URL-адрес непосредственно из документов, на которые ссылается выше, чтобы получить последнюю версию):

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

Добавьте класс ms-Fabric к содержащему элементу, например <body>, для установки семейства шрифтов.Затем вы можете использовать другие классы для установки размеров и цветов: 
<body class="ms-Fabric">
  <span class="ms-font-su ms-fontColor-themePrimary">Big blue text</span>
</body>
0 голосов
/ 17 декабря 2018

Не совсем то, что я искал, но вот один из способов сделать это:

https://github.com/OfficeDev/office-ui-fabric-react/blob/86337324a5fd8b522855eb8bdcbf012a868a26ba/packages/styling/README.md#using-fabric-core-classes

import {
  ColorClassNames,
  FontClassNames
} from '@uifabric/styling';

function renderHtml() {
  return (
    `<div class="${ [
      ColorClassNames.themePrimary,
      FontClassNamed.medium
      ].join(' ') }">Hello world!</div>`
  );
}

мое понимание за https://github.com/OfficeDev/office-ui-fabric-react/wiki/Component-Styling#styling-best-practices заключается в том, что янужно использовать функцию поддержки getTheme() и styles (не style) для нового способа создания стилей.Поэтому я все еще ищу getTheme() решение

==============

вот список доступных шрифтов

https://github.com/OfficeDev/office-ui-fabric-react/blob/1b9405b3b64839975e16ee1fad04d7868d9e3b99/packages/styling/src/styles/fonts.ts

Визуализация шрифтов: https://developer.microsoft.com/en-us/fabric#/styles/typography

Цвета: https://developer.microsoft.com/en-us/fabric#/styles/colors

...