Skip to main content

index.html

As said, we can style React apps by including the CSS in a "regular" way into public/index.html:

File: public/css/style.css


h1 {
    font-size: 2rem;
    color: #F00;
}

When we incorporate the css file into index.html, we immediately see our output being styled.

File: public/css/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
  
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
    <title>React App</title>
  </head>

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>    
  </body>
</html>

This method is a feasible way to import "overlapping" stylesheets, like corporate styling definitions.

Function Component