打字稿反应项目中的单独 Css 文件不适用

Question

我的问题如下，我用打字稿创建了一个新的反应项目。并添加了一个自定义组件，该组件有一个单独的 css 文件用于其样式。文件夹结构是这样的：

在 Header.css 我定义了一个类：

.mainHeading {
    color: green;
}

并在 Header.tsx 中这样引用它：

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

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

export default Header;

为此，我在 react-app-env.d.ts 中添加了以下内容

declare module '*.css';

我在 App.tsx 中使用 Header 组件，如下所示

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;

现在的问题是我希望标题“Streamfiuse”以绿色显示，但显然事实并非如此。我是新来的反应，所以任何帮助表示赞赏。

编辑 1 我也试过这个：

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

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

export default Header;

但也不行。

Answer 1

尝试像这样导入： import './Header.css' 并将 mainHeading 类应用为字符串

Answer 2

也许你可以试试这个

1. 把import styles from './Header.css';改成import './Header.css';

2. 把className={styles.mainHeading}改成className="mainHeading"

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

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

export default Header;