如何将 CSS 样式应用于 React JS 公用文件夹中的 HTML 文件
[英]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.
我正在学习 React JS。我可以将 CSS 样式应用于src文件夹内的组件。 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.但这里是查询，如何将 CSS 样式应用于位于公共文件夹内的 HTML 文件的正文标记。 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 ?我尝试将 CSS 样式放在 HTML 文件中，但它没有反映。如何将 CSS 样式从src文件夹应用到公用文件夹的 HTML 文件？ 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我在src文件夹中有 CSS 文件并将其导入 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/>)
4 个解决方案
解决方案1
1 2022-06-06 05:04:33
You can add your style to your style.css file.您可以将您的样式添加到您的style.css文件中。 Adding style in the public/index.html file is not the best practice在public/index.html文件中添加样式不是最佳实践
body {
// your style
}
解决方案2
1 2022-06-11 22:31:43
You can search for your global CSS file (App.css or index.css).您可以搜索您的全局 CSS 文件（App.css 或 index.css）。
body,
html {
//your style
}
解决方案3
0 2022-06-08 05:41:05
在您的根项目中添加style.css （不在公共文件夹中！）然后将其import您的index.js文件中，例如：
import "./style.css"
解决方案4
0 2022-06-30 05:44:34
Your App component should include react components in itself in src folder .您的App 组件应在src 文件夹中包含自身的反应组件。 Each of those react components can have styling via import .这些反应组件中的每一个都可以通过 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.当您在react 组件中导入样式时，它会与所有其他文件一起呈现到主 App 组件，它们直接影响公共文件夹中的 html 文件。
In other words , no need to change html file in public folder.换句话说，无需更改公用文件夹中的 html 文件。 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 )要更改公共目录中该 html 文件的正文，请将样式导入src 文件夹中的index.js文件，并在 css 中处理正文标记（标记前不带点，这将使正文作为类引用）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.