2

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.

Improve this question
3
  • Why not just add the .ms-font-m class in your component?
    – Waldek Mastykarz
    Commented Aug 31, 2017 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>, ...
    – 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
    Commented Sep 2, 2017 at 7:33

1 Answer 1

Reset to default
1

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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