时间戳

首页 > 解决方案 > 如何将 Skeleton.css 添加到我的 React 应用程序？

javascript - 如何将 Skeleton.css 添加到我的 React 应用程序？

问题描述

我主要在 React Native 中使用 React，现在我正在构建一个网站，所以在我的 React 应用程序中实现skeleton.css时遇到了一些麻烦。

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" type="text/css" rel="stylesheet">

    <title>Urban Hero</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

className我添加了 CDN 链接标签，并希望在我的组件中使用 css类，如下所示：

export class HomeComponent extends Component {
  render() {
    return (
      <div>
        <div className="section hero"></div>
      </div>
    );
  }
}

我确实应用了默认的 CSS，fontFamily 等等。然而，这些类没有被应用。我尝试复制粘贴此演示登录页面，但它看起来不一样。（当然我改变了className的类）

我在这里缺少任何步骤吗？

标签： javascriptcssreactjses6-modulesskeleton-css-boilerplate

解决方案

您需要重新考虑应用程序的架构。您复制到这篇文章中的 HTML 页面在 React 应用程序中没有意义，它应该用 JSX 组件编写（大部分时间）。

React 有很多架构模式，但我通常喜欢从 ES6 开始，包括子组件和 ES6 类扩展React.component。你可以使用常规函数而不是类（查看函数与类组件的 React 文档）。我将把子组件包装在一个<BaseLayout>组件中，该组件为项目中的所有其他组件提供基本 CSS。

要使用此架构并包含 Skeleton CSS，我将利用包管理器 -npm install skeleton-css或yarn add skeleton-css，这取决于您在项目中使用的是哪个。一旦你这样做了，你可以像任何其他 ES6 包含一样添加它。

示例（假设制作了一些结构组件）：

import React from 'react'
import PropTypes from 'prop-types'

// this might be different depending on your file system
import './skeleton.css'

import Header from '../Header/header'
import Footer from '../Footer/footer'
import Metadata from '../Metadata/metadata';

export default class BaseLayout extends React.Component {
  render() {
    return (
      <SiteContainer>
        <Metadata customTitle={ this.props.title } />
        <div>
          <Header />
          <div>
            { /* Child components will inherit the CSS */ 
              children 
            }
          </div>
          <Footer />  
        </div>
      </SiteContainer>
    )
  }
}

BaseLayout.propTypes = {
  children: PropTypes.node.isRequired,
}

推荐阅读