reactjs - Fișierele CSS separate într-un proiect React TypeScript nu se aplică

Problema mea este următoarea, am creat un nou proiect React cu TypeScript. Și am adăugat un component personalizat care are un fișier css separat pentru stilizarea sa. Structura folderului este astfel:

În Header.css am definit o clasă:

.mainHeading {
    color: green;
}

Și l-am referențiat în Header.tsx astfel:

import React from "react";
import styles from './Header.css';

function Header() {
    return(
        <h1 className={styles.mainHeading}>Streamfiuse</h1>
    );
}

export default Header;

Pentru a face acest lucru, am adăugat următoarele în react-app-env.d.ts

declare module '*.css';

Folosesc componenta Header în App.tsx astfel:

import React from 'react';
import Discover from './components/discover/Discover';
import Header from "./components/header/Header";
import './App.css';

function App() {
  return (
      <div className="App">
        <Header />
        <Discover />
      </div>
  );
}

export default App;

Problema acum este că m-aș aștepta ca titlul „Streamfiuse” să apară în verde, dar se pare că nu apare. Sunt nou în React, așa că orice ajutor este apreciat.

Editare 1 Am încercat și asta:

import React from "react";
import './Header.css';

function Header() {
    return(
        <h1 className="mainHeading">Streamfiuse</h1>
    );
}

export default Header;

Dar nici asta nu funcționează.

Răspuns #1

Încearcă să imporți astfel: import './Header.css' Și să aplici clasa mainHeading ca un șir

Răspunsul #2

Poate ai putea încerca asta

1. Schimbă import styles from './Header.css'; în import './Header.css';

2. Schimbă className={styles.mainHeading} în className="mainHeading"

import React from "react";
import './Header.css';

function Header() {
    return(
        <h1 className="mainHeading">Streamfiuse</h1>
    );
}

export default Header;