I often wonder why CSS appears in the style tag within the head section of the rendered HTML in React when I inspect it

This is my component code:

import React from "react";
import "./homepage.styles.scss";

const Hompage = () => {
  return (
    <div className="homepage">
     .......

    </div>
  );
};

export default Hompage;

This is the styling for my component:

.homepage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 80px;
}

.directory-menu {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

When I inspect my code, it shows

<style>my css</style>
in the head section.

Here is a screenshot of how it appears in Chrome DevTools: https://i.sstatic.net/seTiN.jpg

Answer №1

In the world of React and Angular apps, bundling all CSS and JS into a single index.html page is the conventional way to go.

It seems unavoidable, but experimenting with lazy loading components might offer some relief, although the CSS will likely still be pre-appended to your page.

The purpose of compiling and appending CSS and JS into a main HTML file is to prevent the browser from having to wait for separate requests to finish.

By following this method:

  1. Your page loads quickly.
  2. A server request is saved.
  3. No blocking CSS or JS resources.

There are many more benefits that come from using webpack for this process.

Additionally, any CSS libraries you utilize will also be included in a style tag within your page.

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

Making changes to a global variable within a React component can result in render outcomes that are not anticipated

As I delve into learning React, I came across a segment in their 'tutorial' section titled 'Describing the UI'. There's one part that is particularly baffling to me - 'Keeping components pure'. What puzzles me is this: T ...

Clear the ant design RangeSelect value once it is closed

When I open the ant design range select and navigate to a previous date, then close it without selecting any date or year, upon reopening it still displays the previously navigated date. I would like the current date to be displayed whenever I open the ra ...

Deciphering HighCharts Parameters - understanding plotX, plotLeft, and shapeArgs

Could anyone provide information on where to find the definitions of different Series object properties like plotX, plotLeft in highcharts? I have looked through the documentation but couldn't locate it. I am currently trying to comprehend this part ...

Tips for adding response buttons in BotFramework-Webchat for sending reactions to the Bot hosted on Azure

I am in the process of developing a chatbot using BotFramework-WebChat with Typescript and Azure for the backend. I am interested in adding reaction buttons (such as thumbs up, thumbs down) to each message in the chatbot, allowing users to interact with th ...

Issue with CSS3 gradient display in Firefox and IE, functioning correctly only in Chrome

I recently developed a text gradient class that looks great in Google Chrome but unfortunately doesn't display correctly in Firefox and Internet Explorer. In these browsers, there is a visible background gradient behind the text which is not the desir ...

How can I use jQuery to slide up and slide down divs that share the same class?

Currently, I am working on creating a single-page checkout form. The challenge I am facing involves sliding up and down various divs with the same class name but different contents. To demonstrate this issue, I have prepared a sample in JSFiddle: http:// ...

Why does the flex-start and flex-end values correspond to the top and bottom positions when using the flex-direction property set

I am attempting to organize text and buttons into a row, with the buttons aligned on the right side and the text on the left side. My approach involves creating a flexbox layout and assigning items the appropriate classes for alignment. html, body { widt ...

"Hooked on the dark side: embracing a sleek dark

Greetings! I have developed a custom hook for defining my theme in my application. Here is the code snippet: export default function App() { const [theme, setTheme] = usePersistedState('light'); const toggleTheme = () => { setTheme(t ...

Customizing the sizes of HTML components (h1, h2, h3, etc.) with Tailwindcss for both desktop and mobile platforms

Currently, I am working on a project using Tailwind CSS and Next.js. I want to customize the font size of h1 element from 40px to 46px for desktop screens (1440px) and then adjust it to 30px for mobile web (375px). I attempted to add a new property in the ...

Tips for choosing a row in Ag-grid when initiating a drag operation

My grid is set up with only 1 column. Currently, I am facing an issue where if row dragging is enabled, I cannot select rows unless I manually bind a key to set supressRowDrag=true. This should be possible and straightforward since the row node is alread ...

CSS resetting can lead to tables appearing misaligned

After applying a CSS reset to my website's stylesheet (which is valid as CSS 2.0 and used with XHTML 1.0 transitional webpage), I noticed that a table on my website no longer looks correct. Specifically, the table is now positioned incorrectly and the ...

What is the best way to initiate server component revalidation following an API request in NextJs 14?

I currently have a server component ("/") in place which directly queries my database using Drizzle. The UI is designed to look different if the user has at least one file. However, I am facing an issue where even after calling a specific route from a di ...

What is the best way to ensure that a child div can expand to fit within the scrollable area of its parent div

I am facing an issue with a parent div that changes size based on the content inside it. When the content exceeds the initial size, causing the parent to scroll instead of expanding, I have a child div set to 100% width and height of the parent. However, t ...

Arranging extensive menu sections and content containment

I am currently working on enhancing my website's navigation by creating a mega menu. However, I am facing issues with the organization of the divs containing the ul content. In the fiddle linked below, you can see that "Africa", "Asia", and "Oceania" ...

Event handlers do not have a definition for "this"

Why is the count not defined in the increaseCounter function but is defined in the getBadgeClass function? <button onClick={this.increaseCounter} className={this.getBadgeClasses()}>Increment</button> getBadgeClasses() { ...

Is there a way to eliminate the hover opacity effect when clicking on the video to prevent transparency?

Is there a way to change the opacity of a YouTube video when hovering over it, but have it stay solid when clicked to play? The current method doesn't seem to be working for me. I'm having trouble using jQuery and the click function on the ifram ...

Using CSS3 translate will result in children becoming relatively positioned

I am facing an issue with a sidebar that contains 2 divs. <div class="sectionsContainer clearfix"><-- Sidebar --> <div class="leftSection pull-left"> <p>Maor</p> </div> <div class="rightSection pu ...

Create a situation where content exceeds its container without specifying a fixed

I am in the process of developing an image scroller (or possibly known as a carousel) where I have a horizontal element containing a child element that scrolls horizontally. My dilemma is that I want the parent element to have a width of 100%, while allowi ...

Utilize Material UI's makeStyles to apply styles to a component with the attribute aria-checked set to "true"

I would like to customize the appearance of a checkbox (not using Material-UI checkbox) by utilizing its aria-checked="true" attribute with makeStyles. In the Material-UI documentation, I noticed that pseudo selectors can be styled like this: '&: ...

When the 'Show More' button is clicked, one Div will smoothly slide over another Div

I've been struggling for hours to find a way to make one DIV slide over another DIV below it instead of pushing it down. The setup is quite straightforward. I have a script that reveals more text when the 'Show More' button is clicked. Desp ...