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.


npm i csstype 

Necessary imports:

import * as CSS from 'csstype'; 

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:

var divStyle: CSS.Properties = {  

By default, it only supports a string if we need to pass number literals.

var divStyle: CSS.Properties<string | number> = {  

We can consume this in our tsx file with the following:

<div  style={divStyle}>  </div>  

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

const divStyle: CSS.PropertiesFallback<string | number> = {  
  display: ['-webkit-flex', 'flex'],  
  color: 'white',  

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

const divStyle: { [P in CSS.SimplePseudos]?: CSS.Properties } = {  
  ':hover': {  
    display: 'flex',  

It also support hyphen case, this will implemented by:

interface Style extends CSS.Properties, CSS.PropertiesHyphen {}  
const mydivstyle: Style = {  
  'flex-grow': 1,  
  'flex-shrink': 0,  
  'font-weight': 'normal',  
  backgroundColor: 'white',  
  'padding':'10 10 10 10'  


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:

import { style,stylesheet } from "typestyle";  

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

const myclassname = style({paddingLeft: 'red',marginLeft:'10px'});  

We can consume this in our tsx file with:

<div className={myclassname}> </div> 

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.

const redMaker = {color:'red'};  
const bigFont = {fontSize: '50px'};  
const bigRedClass = style(  
<div className={bigRedClass}>Hello world</div>  

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.

const mycolors = style({    
  transition: 'color .2s',    
  color: 'blue',    
  $nest: {    
    '&:hover': {    
      color: 'red'    
    '&::before': {    
      content:'Hello '    
    }  , '&>*': {  
      marginBottom: 10,  
    '&>*:last-child': {  
      marginBottom: '0px',  
<h1 className={mycolors }world</h1>    
//output be Helloworld 

Sometimes we need to implement the whole CSS file in the component. That can be achieved with the stylesheet class:

Implementation sample:  

const myButton = {  
  border: 'solid thin red',  
  borderRadius: 2,  
  color: 'white',  
  padding: '4px 10px'  
const css = stylesheet({  
  component: {  
      display: 'flex'  
  primaryButton: {  
      backgroundColor: 'darkblue',  
  secondaryButton: {  
      backgroundColor: 'teal',  
<div className={css.component}>  
  <button className={css.primaryButton}>Primary</button>  
  <button className={css.secondaryButton}>Secondary</button>  


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