How to include office ui fabric CSS font specifications

Question

Since I updated my SPFx webpart today to

> npm update:
+-- @microsoft/[email protected]
+-- @microsoft/[email protected]
+-- @microsoft/[email protected]
+-- @microsoft/[email protected]
+-- @microsoft/[email protected]
`-- @types/[email protected]

> npm ls office-ui-fabric-react
`-- @microsoft/[email protected]
  `-- [email protected]

from using office-ui-fabric-react 2.31, I have issues using the CSS styles like ms-font-m. In all my .module.scss files I used @import "~office-ui-fabric-react/dist/sass/Fabric.Common"; . That does not seem to exist anymore or moved. I did set my fonts like:

.iLoggerClientCalloutHeading {
    @include ms-font-m;
    @include ms-fontWeight-semibold;
}

I saw to import { FontClassNames } from '@uifabric/styling'; in the .tsx file and use <div className={ css(FontClassNames.medium) }>. Is this the way? It seems I am missing something here, specifying styling once in a css-class seems more reasonable to me, than specifying it for each element in the .tsx code.

I was not able to use $ms-color-themeLight either. I created a _theme.module.scss from GitHub/StfBauer/_theming.scss and the colours work.

How do I reference/use the ms-font classes in my SPFx .scss files? Any help is much appreciated.

Thanks for your reply ;-) Do you mean like <div className={ css( 'ms-font-m' ) } /> ? If so, then I would need to specify the ms-font-m for each column header, instead I did <div className={ css( styles.columnHeader ) }>Header 1</div> , <div className={ css( styles.columnHeader ) }>Header 2</div>, ... — Dennis Kuhn
– Dennis Kuhn, Commented Aug 31, 2017 at 8:07
Yes, although, like mentioned below, you can just reference it as a string without enclosing it in css(), so <div className={"ms-font-m"}> — Waldek Mastykarz
– Waldek Mastykarz, Commented Sep 2, 2017 at 7:33

Joe Crockett · Accepted Answer · 2017-09-01 17:41:25Z

Here's a quote from a react tutorial written by Paul @ Facebook:

You'll notice that React uses className instead of the traditional DOM class. From the docs, "Since JSX is JavaScript, identifiers such as class and for are discouraged as XML attribute names. Instead, React DOM components expect DOM property names like className and htmlFor, respectively."

The way I interpret that is: the property name className in React works just like the traditional DOM 'class'. No need for the syntax your applying, just add in className="ms-font-m".

Stack Exchange Network

How to include office ui fabric CSS font specifications

1 Answer 1

Your Answer

Hot Network Questions

How to include office ui fabric CSS font specifications

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions