How to include .css file in .tsx typescript?

Question

How do i include "css" file in "tsx" and how to use it? i.e how do i render static files?

import * as React from "react";
import { Header } from "./header";

//import "./home.css";


export class Home extends React.Component<{}, {}> {
    render() {
        return (
            <div id="page-top" className="landing-page">
                <Header />
            </div>
        );
    }
}

Answer 1

See this answer:

https://stackoverflow.com/a/37144690/3850405

If you only need css for a class in your component you could do it like below. I like this solution for when inline css does not work and only small changes are needed.

import * as React from "react";
import { Header } from "./header";

export class Home extends React.Component<{}, {}> {
    render() {
        const css = `
        .landing-page {
            background-color: orange;
        }
        `
        return (
            <div>
                <style>
                    {css}
                </style>
                <div id="page-top" className="landing-page">
                    <Header />
                </div>
            </div>  
        );
    }
}