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链接标记，并希望在组件中使用className使用CSS语法：

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

我确实应用了默认的CSS，fontFamily等。但是，没有应用这些类。我尝试复制粘贴this demo landing page，但看起来并不一样。（当然，我更改了className的类）

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

Answer 1

您需要重新考虑应用程序的体系结构。您复制到本文中的HTML页面在React应用程序中没有意义，应将其大部分时间用JSX组件编写。

React有很多架构模式，但是我通常喜欢从ES6开始，包括用于子组件和ES6类的扩展React.component。您可以使用常规函数代替类（请检查React documentation on Functions vs Class components）。我将把孩子包装在<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,
}

Answer 2

尝试在React应用程序中导入CSS文件。

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

2 个答案: