CODEWITHSUNDEEP
javascripthtmlcssreactjs
user18055852
user18055852

Reputation:

How to apply CSS style to HTML file that is inside the public folder of React JS

I'm learning React JS.I can apply CSS style to components that is inside the src folder. But here is the query, how can I apply CSS style to a body tag of HTML file which is sitting inside the public folder. I have tried putting the CSS style inside the HTML file but it's not reflecting.How can I apply CSS stylle from src folder to HTML file of public folder? is that possible?

    <link rel='stylesheet' href='style.css'/>
    <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" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

I have CSS file inside the src folder and imported it to index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css'
import './style.css'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>)

Upvotes: 1

Views: 1978

Answers (4)

Nadir
Nadir

Reputation: 46

Your App component should include react components in itself in src folder. Each of those react components can have styling via import. For example:

import "./YourComponentName.css"

When you import styling in a react component, it is rendered with all other files to main App component and they directly affect html file in public folder.

In other words, no need to change html file in public folder. Just import styling at the top of component file and ,if it's rendered correctly, styling will be visible. To change body of that html file in public directory , import styling to index.js file in src folder, and address the body tag in css (without dot before the tag , which will make body as a class reference )

Upvotes: 0

Tnaike
Tnaike

Reputation: 39

You can search for your global CSS file (App.css or index.css).

body,
html {
   //your style 
}

Upvotes: 1

Amin Firouzpour
Amin Firouzpour

Reputation: 1

Add style.css in your root project (Not in a public folder!) then import it in your index.js file like:

import "./style.css"

Upvotes: 0

Satel
Satel

Reputation: 187

You can add your style to your style.css file. Adding style in the public/index.html file is not the best practice

body {
  // your style
}

Upvotes: 0

Related Questions