The inclusion of individual CSS files in a TypeScript React project does not have any effect

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.

Answer №1

One way to import is as shown below: import './Header.css' Then, make sure to use the mainHeading class within quotes

Answer №2

Here's a possible solution you can try:

  1. Instead of using

    import styles from './Header.css';
    , try using import './Header.css';

  2. Replace className={styles.mainHeading} with

    className="mainHeading"

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

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

export default Header;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountered an error while trying to retrieve data from

Having trouble with file uploads to the S3 bucket using @aws-sdk/client-s3 library and encountering errors when uploading files larger than 70kbps: `TypeError: Failed to fetch at FetchHttpHandler.handle (fetch-http-handler.js:56:13) at PutObjectCommand ...

Sass compilation with source mapping

Is there a more efficient method to compile my sass files with sourcemap enabled other than using the command below? sass --compass --sourcemap --style compact --watch sass:css In the case of utilizing compass, 'compass watch' would be the pref ...

Resizable table example: Columns cannot be resized in fixed-data-table

I've implemented a feature similar to the Facebook example found here: https://facebook.github.io/fixed-data-table/example-resize.html You can find my source code (using the "old" style with React.createClass) here: https://github.com/facebook/fixed- ...

Tips for utilizing two renderCell functions in a datagrid from Material UI without encountering duplication or repetition

Utilizing Material UI, I have designed a table to showcase my data. In this setup, I am required to use renderCell for two specific properties: 'level by user' and 'level by referent'. Issue: The problem arises when Material UI displa ...

Dynamic image gallery with a flexible layout and interactive scrollbar using Flexbox

I'm looking to incorporate a scrolling image gallery into a flexbox layout so that as the browser page size changes, the gallery will scale according to the flex-grow index. My goal is to ensure all images remain accessible via a scrollbar without usi ...

ReactJS: Oops! Looks like there's an issue with the element type - it's invalid. We were expecting a string

I am in the process of setting up a basic server-side rendered React application. Listed below are the steps I have taken: Step 1: Creating a new React app using create-react-app: npx create-react-app my-ssr-app Step 2: Installing necessary dependencies: ...

Can routes be nested in React components?

I'm curious to know if there's a way to integrate nested routes in React, where the Navbar component serves as the parent for dashboard and properties. <Router> <Routes> <Route path='/' element={<Home />} /> ...

Exploring Material UI's SelectField with the multiple selection feature

When working with material ui, I encountered an issue while trying to utilize the multiple property. The error message states: multiple does not exist on the type selectfiled <SelectField multiple={true} //it doesn't work value={th ...

Is there a way to locate a null string within this data arrangement?

I am looking to create functionality where, when a button is clicked, the application checks the state and takes different actions based on the result. Specifically, I want to ensure that there are no empty "value" fields, and if there are, redirect to ano ...

A horizontal line will separate the title both before and after

Is there a way to create an hr line both before and after a title using Bootstrap 5? I have managed to add the lines, but I am struggling to align the title within a container class in order for the lines to span the width of the screen. My current code s ...

Ways to eliminate hover effect in CSS

I have a text that is currently displayed as a hyperlink, and some CSS code is causing it to underline and become bold when hovered over. I want to remove the hyperlink, but still keep this style by default without needing to hover over the text. Here is m ...

Selecting the correct data type for react-icons

I'm currently working on designing a navigation bar with a customized type to utilize the map() function. My goal is to display an icon for each entity, so that the icon appears in front of the text within the navbar. However, I am encountering diffic ...

Configuration for secondary dependencies in Tailwind

As per the guidelines outlined in the official documentation, it is recommended to configure Tailwind to scan reusable components for class names when using them across multiple projects: If you’ve created your own set of components styled with Tailwin ...

Adjust the height of the dropdown list in react-select (React Material UI)

I recently added a dropdown feature using react-select to my project. However, I encountered an issue where the dropdown list was initially too large and taking up the entire page. I am looking for a solution on how to style the react-select dropdown list ...

The selected value is not displayed in the Material UI select component

My select component is showing the menu items and allowing me to select them, but it's not displaying the selected value. However, its handle function is functioning correctly because when I choose an item, the value in the database gets updated. Bel ...

When using a Redux action type with an optional payload property, TypeScript may raise complaints within the reducer

In my react-ts project, I define the following redux action type: type DataItem = { id: string country: string population: number } type DataAction = { type: string, payload?: DataItem } I included an optional payload property because there are tim ...

learn how to customize the appearance of text for a group in vis.js by utilizing the groupTemplate feature

I am currently working on an application that utilizes vis.js to create timeline events in a React environment. My goal is to enhance each event by adding an icon to it. To accomplish this, I am utilizing the groupTemplate feature and intend to render a co ...

Typescript and React: Unraveling the intricacies of complex

Is it possible to define custom types verified by a function in Typescript/React? Instead of using a simple 'string' type, I envision using a regex expression: interface Verify { email: /.+@.*\.com/g; } The specific regex above might not ...

Generate a menu submenu allowing for interactive toggling and dynamic visualization of expandable/collapsible sections upon clicking, featuring visually

Looking for assistance in creating a dynamic menu with sub-menus that can expand upon clicking. The goal is to have an expandable menu structure where the user can click to expand or collapse certain sections. However, my current code is not functioning co ...

Error in React due to custom pagination indexing issue

When developing a custom Pagination component in React, I encountered an issue where the indexing restarts from "0" every time the page is changed using the next or previous button. What I want is for the index to start from the last position when clicking ...