Styling is the most important part of web development. In this article, we will learn how to efficiently consume CSS in our Typescript file.


This is an npm package available in the npm repository handle styled attribute in an HTML element.


Necessary imports:


Properties are categorized into different uses and in several technical variations to provide typings that suit as many as possible. The good part is that it supports IntelliSense.

Default Hyphen Fallback HyphenFallback
All Properties PropertiesHyphen PropertiesFallback PropertiesHyphenFallback
Standard StandardProperties StandardPropertiesHyphen StandardPropertiesFallback StandardPropertiesHyphenFallback
Vendor VendorProperties VendorPropertiesHyphen VendorPropertiesFallback VendorPropertiesHyphenFallback
Obsolete ObsoleteProperties ObsoletePropertiesHyphen ObsoletePropertiesFallback ObsoletePropertiesHyphenFallback
Svg SvgProperties SvgPropertiesHyphen SvgPropertiesFallback SvgPropertiesHyphenFallback
  • All – Includes Standard, Vendor, Obsolete and SVG
  • Standard – Current properties and extends subcategories StandardLonghand and StandardShorthand (e.g. StandardShorthandProperties)
  • Vendor – Vendor prefixed properties and extends subcategories VendorLonghand and VendorShorthand (e.g. VendorShorthandProperties)
  • Obsolete – Removed or deprecated properties
  • SVG – SVG-specific properties
  • Default – JavaScript (camel) cased property names
  • Hyphen – CSS (kebab) cased property names
  • Fallback – Also accepts an array of values e.g. string | string[]
Using default Properties:
By default, it only supports a string if we need to pass number literals.
We can consume this in our tsx file with the following:


Sometimes, we need to pass array of values for CSS that uses PropertiesFallback:

Sometimes, there is an need for pseudo selectors, in that case:

It also support hyphen case, this will implemented by:

This is also an npm package available in the npm repository. By using this package, we can write CSS in a typescript file.

npm i typestyle

Necessary imports:

Similar to the style attribute, we can assign classCss to className using the style method in typestyle, e.g.

We can consume this in our tsx file with:



Concept – Mixin
A mixin is an object that contains properties for reuse.
The style function can take multiple objects. This makes it easy to reuse simple style objects, e.g.


Concept – Interpolation
You can nest properties for different selectors using the $nest property. Any & in a key for $nest gets replaced with the generated class name when its written to CSS. For example, it allows super simple CSS pseudo class (&:hover, &:active, &:focus, &:disabled) customization. It also allows you to use pseudo-elements ,(e.g. ::after, &::before etc):, child selectors.
Sometimes we need to implement the whole CSS file in the component. That can be achieved with the stylesheet class:
Implementation sample:



In this article, we learned various types of CSS implementation in SPFx. I hope this helps someone. Happy coding 🙂