In order to unify our UI/UX designs, it is best to use a standard style and component library. For our purposes, we will look at Recoil.

In order to install Recoil, we must configure our project to compile .less files. LESS is a dynamic language for generating stylesheets, and it is heavily used by Recoil to define its styles.

In the console, run

npm install css-loader less less-loader style-loader --save-dev

Then, we must update our webpack.config.js files. If you're using the ts-boilerplate project, be sure to update both versions of the configuration. In the loaders array, add

{
    test: /\.less$/,
    loader: 'style-loader!css-loader!less-loader'
}

We must now add Recoil. In the console, run

npm install @cubex/recoil

Now that we have recoil installed, we must reference the .less files. In our main.tsx, include the line

import '@cubex/recoil/less/index.less';

This directly references the stylesheet to be compiled by Webpack. Furthermore, we only need to reference the stylesheet here.

Using Recoil in a View

We can now import Recoil components, which will be styled correctly. For example, let's say we wish to use a Button in our component. We can simply include

import { Button } from '@cubex/recoil';

And then in the body of the component, we can use it directly

render() {
    return (
        <Button>OK</Button>
    );
}