Как добавить Skeleton.css в свое приложение React? - PullRequest
Новая
       25

Как добавить Skeleton.css в свое приложение React?

0 голосов
/ 06 декабря 2018

Я в основном использую React в React Native, и сейчас я создаю веб-сайт, поэтому у меня возникли небольшие проблемы с реализацией skeleton.css в моем приложении React. 

<!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>

Iдобавил тэг ссылки CDN и ожидал использовать выражения css, используя className в моих компонентах, например так: 

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

Я получаю CSS по умолчанию, fontFamily и так далее.Однако классы не применяются.Я попытался скопировать эту целевую страницу демонстрации , и она просто не выглядит так же.(Конечно, я изменил класс для className)

Есть ли какой-то шаг, который я здесь пропускаю?

Ответы [ 2 ]

0 голосов
/ 06 декабря 2018

Вам необходимо переосмыслить архитектуру вашего приложения.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,
}
0 голосов
/ 06 декабря 2018

Попробуйте импортировать файл CSS в приложение React.

...