TypeStyle is the only current CSS in JS solution that is designed with TypeSafety and TypeScript developer ergonomics in mind.

In this lesson we will show how easy it is to setup with zero configuration and also demonstrate its UI framework agnostic nature. We will also show how to integrate it with your application framework of choice using ReactJS as an example.

Install:

npm install --save typestyle

Using:

import { style } from ‘typestyle‘;
import * as React from ‘react‘;
import * as ReactDOM from ‘react-dom‘;

const className = style({
   color: ‘red‘,
   background: ‘yellow‘
});

ReactDOM.render(
    <div className={className}>
        Hello Typestyle
    
 
</div>,
    document.getElementById(‘root‘)
);

It generate unqiue class name:

.fdulqt6 {
    background: yellow;
    color: red;
}

<div data-reactroot="" class="fdulqt6">Hello Typestyle</div>

[TypeStyle] Add type safety to CSS using TypeStyle