My issue involves creating a new react project with typescript and adding a custom component with a separate CSS file for styling. The folder structure is as follows:
https://i.sstatic.net/UNtEP.png
In the Header.css file, I have defined a class:
.mainHeading {
color: green;
}
The class is then referenced in the Header.tsx file like this:
import React from "react";
import styles from './Header.css';
function Header() {
return(
<h1 className={styles.mainHeading}>Streamfuse</h1>
);
}
export default Header;
To enable this setup, I added the following to the react-app-env.d.ts file:
declare module '*.css';
The Header component is being used in the App.tsx file as shown below:
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;
However, the issue is that the heading "Streamfuse" is not appearing in green as expected. Being new to react, any assistance would be greatly appreciated.
Edit 1 I also tried the following approach:
import React from "react";
import './Header.css';
function Header() {
return(
<h1 className="mainHeading">Streamfiuse</h1>
);
}
export default Header;
But unfortunately, it did not work either.