Search code examples
javascriptcssreactjses6-modulesskeleton-css-boilerplate

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

I mainly use React in React Native and now I am building a website, so I am having a little trouble implementing skeleton.css in my React App.

<!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 added the CDN link tag and expected to use the css clases using className in my components like so:

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

I do get the default CSS applied, fontFamily and so on. However the classes are not being applied. I tried copy pasting this demo landing page and it just does not look the same. (Of course I changed class for className)

Is there any step that I am missing here?

Solution

  • You need to rethink the architecture of your application. The HTML page you copied into this post doesn't make sense in a React application, which should be written in JSX components (most of the time).

    There many architectural patterns for React, but I usually like to start with ES6 includes for child components and ES6 classes to extend React.component. You could use regular functions instead of classes (check the React documentation on Functions vs Class components). I'll wrap the children in a <BaseLayout> component that provides the base CSS to all the other components in the project.

    To work with this architecture and include Skeleton CSS, I'd leverage a package manager - npm install skeleton-css or yarn add skeleton-css, depending on which one you are using with your project. Once you do so, you can add it in like any other ES6 include.

    Example of this (assuming some structural components are made):

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