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

Question

我主要在 React Native 中使用 React，现在我正在构建一个网站，所以我在我的 React App 中实现 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>

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

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

我确实应用了默认 CSS、fontFamily 等等。但是 classes 没有被应用。我尝试复制粘贴 this demo landing page，但它看起来不一样。（当然我把 class 改成了 className）

这里有我遗漏的步骤吗？

Answer 1

尝试在您的 React 应用程序中导入您的 css 文件。

Answer 2

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

React 有很多架构模式，但我通常喜欢从子组件的 ES6 包含和扩展 React.component 的 ES6 类开始。您可以使用常规函数而不是类（检查 React documentation on Functions vs Class components）。我会将子项包装在 <BaseLayout> 组件中，该组件为项目中的所有其他组件提供基础 CSS。

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

这个例子（假设制作了一些结构部件）：

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,
}

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

How do I add Skeleton.css to my React app?

javascript

css

reactjs

es6-modules

skeleton-css-boilerplate