在 HTML 中使用 LINK 标记和在 JS 文件中使用 IMPORT 语句将 CSS 添加到反应应用程序中有什么区别？

Question

What is the different between using a LINK tag in HTML and IMPORT statement in JS file for adding CSS into a react app?在 HTML 中使用 LINK 标记和在 JS 文件中使用 IMPORT 语句将 CSS 添加到反应应用程序中有什么区别？

example index.html:示例索引.html：

<html>
  <head>
    <link rel='stylesheet' type="text/css" href='/admin/style.css'>
  </head>
  <body>
  </body>
</html>

VS VS

example index.js:示例 index.js：

import './src/admin/style.css';

Is there any difference in how the CSS classes are added to the DOM? CSS 类添加到 DOM 的方式有什么不同吗？ Also is there any performance improvement if we choose one method over the other?如果我们选择一种方法而不是另一种方法，还会有任何性能改进吗？

Answer 1

I believe the main difference is the scope of the styles you're applying to the application.我相信主要区别是您申请的 styles 的 scope 。 If you use the link element, the only possibly place to put the style is at the root of the react application, which means all components mounted on the application will have styles applied and inherited from the one style sheet you linked.如果您使用链接元素，则唯一可能放置样式的位置是 react 应用程序的根目录，这意味着安装在应用程序上的所有组件都将应用 styles 并从您链接的一个样式表继承。 In the case of import, it makes it possible to localize some particular styles to a component.在导入的情况下，可以将某些特定的 styles 本地化到组件。 For example, if you import a file named sign-in.css to the sign-in component page, only the sign-in page is applied the styles in the style sheet you imported例如，如果您将名为sign-in.css的文件导入到登录组件页面，则只有登录页面应用了您导入的样式表中的 styles

在 HTML 中使用 LINK 标记和在 JS 文件中使用 IMPORT 语句将 CSS 添加到反应应用程序中有什么区别？

问题描述

1 个解决方案

解决方案1
0 2020-06-04 13:58:39

在 HTML 中使用 LINK 标记和在 JS 文件中使用 IMPORT 语句将 CSS 添加到反应应用程序中有什么区别？

问题描述

1 个解决方案

解决方案1 0 2020-06-04 13:58:39

解决方案1
0 2020-06-04 13:58:39