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

Question

My problem is the following, I created a new react project with typescript. And added a custom component that has a separate css file for it's styling. The folder structure is like this:

In the Header.css I defined a class:

.mainHeading {
    color: green;
}

And referenced it in the Header.tsx like this:

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

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

export default Header;

To do this I added the following to the react-app-env.d.ts

declare module '*.css';

I'm using the Header component in the App.tsx like the following

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;

The problem is now that I would expect the heading "Streamfiuse" to appear in green, but apparently it doesn't. I'm new to react so any help is appreciated.

Edit 1 I also tried this:

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

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

export default Header;

But does't work either.

Answer 1

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

Answer 2

Maybe you could try this

1. Change import styles from './Header.css'; into import './Header.css';

2. Change className={styles.mainHeading} into className="mainHeading"

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

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

export default Header;