不適用打字稿反應項目中的單獨 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' ： import './Header.css'並將 mainHeading 類應用為字符串

Answer 2

也許你可以試試這個

1. import styles from './Header.css';更改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;