Since I updated my SPFx webpart today to

> npm update:
+-- @microsoft/sp-build-web@1.2.0
+-- @microsoft/sp-core-library@1.2.0
+-- @microsoft/sp-module-interfaces@1.2.0
+-- @microsoft/sp-webpart-base@1.2.0
+-- @microsoft/sp-webpart-workbench@1.2.0
`-- @types/react@15.0.38

> npm ls office-ui-fabric-react
`-- @microsoft/sp-webpart-base@1.2.0
  `-- office-ui-fabric-react@4.32.0

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.

  • Why not just add the .ms-font-m class in your component? Aug 31 '17 at 6:24
  • 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>, ... Aug 31 '17 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"}> Sep 2 '17 at 7:33

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".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.