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/>)
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
}
You can search for your global CSS file (App.css or index.css).
body,
html {
//your style
}
Add style.css in your root project (Not in a public folder!) then import it in your index.js file like:
import "./style.css"