如何创建单个 React.js 页面应用，每个视图使用不同的 CSS

2020-08-17 08:00飞浪

介绍

在本指南中，我们将了解如何使用react-helmet为React中带有react-router-dom的每个页面编写不同的 CSS 。

在某些情况下，您只需要为特定页面添加最少的 CSS。例如，让我们考虑一个登录页面。除非用户通过身份验证，否则您不需要整个应用程序的样式表。因此，在这种情况下，等待浏览器下载整个应用程序的 CSS 对用户来说是不公平的，从而导致糟糕的用户体验。

React 头盔 (react-helmet)

Helmet 是一个可重复使用的 React 组件，可管理对文档头的所有更改。

用法

      import {Helmet} from 'react-helmet';

// ...
<Helmet>
    <meta charSet="utf-8" />
    <title>My Title</title>
    <link rel="canonical" href="http://mysite.com/example" />
</Helmet>
// ...
    

<Helmet />组件将纯 HTML 元素注入到应用程序的<head>标记中。它可以包含 meta、title、link、style 或任何其他有效的 HTML head 标记。

让我们从代码开始

首先，让我们在src目录中创建一个“Pages”文件夹，其中包含我们所有的页面组件。我们将有两个页面，Login 和 Home，并在 Login 页面中使用<Helmet />组件。

index.js 文件

      import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import Login from "./Pages/Login";
import Home from "./Pages/Home";

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Login</Link>
            </li>
            <li>
              <Link to="/home/">Home</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Login} />
        <Route path="/home/" component={Home} />
      </div>
    </Router>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
    

Pages/Home.js 文件

      import React from "react";

import "../styles.css";

function Home() {
  return (
    <div className="App">
      <h1>Home Page</h1>
      <p>This is the Home Page</p>
    </div>
  );
}

export default Home;
    

Pages/Login.js 文件

在登录页面中，我们将添加<Helmet />组件并将登录样式表的链接标签注入头部。

      import React from "react";
import { Helmet } from "react-helmet";

function Login() {
  return (
    <div className="login container">
      <Helmet>
        <link rel="stylesheet" href="login.css" />
      </Helmet>
      <h1>Login</h1>
      <p>This is the login page</p>
    </div>
  );
}

export default Login;
    

或者，我们也可以包含链接标签，如下所示：

      function Login() {
  return (
    <div className="login container">
      <Helmet link={ 
          [ 
            "rel": "stylesheet", 
            "href": "login.css" 
          ] 
        }/>
      <h1>Login</h1>
      <p>This is the login page</p>
    </div>
  );
}
    

style.css 文件

      .App {
  font-family: sans-serif;
  text-align: center;
}

h1 {
  color: #fc3;
}
    

login.css 文件

在公共文件夹中添加login.css文件。

      h1 {
  color: #e09;
}

p {
  font-size: 24px;
}
    

现在，当您从登录页面切换到主页时，您会注意到主页中的<h1>元素与登录页面的颜色不同，并且页面中的字体系列也不同。

如果你不想使用 React Helmet，还有其他选择

如果出于某种原因，你不需要 head 标签管理，也不想用额外的库使你的应用变得臃肿，那么你可以使用 React 原生支持的 CSS in JS 方法。因此，在页面组件中，你可以编写如下内容：

页面/Login.js

      import React from "react";
import { Helmet } from "react-helmet";

function Login() {
  return (
    <>
      <div className="login container">
        <h1>Login</h1>
        <p>This is the login page</p>
      </div>
      <style
        dangerouslySetInnerHTML={{
            __html: `
            h1 {
                color: #e09;
            }

            p {
                font-size: 24px;
            }          `
        }}
      />
    </>
  );
}

export default Login;
    

结论

React Helmet 是一个很好的 HTML head 标签管理库。它可以更新元标签、添加图标并更新每个页面的标题。本指南就到此为止，希望您今天学到了一些新东西。请关注我关于 React 的其他指南您需要了解的有关 Axios Formspree AJAX 和 ES6 的所有信息无需 JQuery AJAX 在 React 中提交表单

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

曝光28556浏览1561