What is the best way to incorporate Skeleton.css into my React application?

As someone who primarily uses React in React Native but is now working on a website, I have run into some issues trying to implement 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>

After adding the CDN link tag, I expected to be able to use the css classes using className in my components like this:

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

While I do see default CSS properties applied such as fontFamily, the specific classes are not being properly applied. I even attempted to replicate this demo landing page design, making sure to change class to className, but it still doesn't look the same.

Could there be a step that I may have overlooked in this process?

Answer №1

If you want to improve the structure of your application, it's important to reconsider the architecture. The HTML code you pasted here may not be suitable for a React application, as React typically uses JSX components.

There are various architectural patterns you can follow in React, but starting with ES6 imports for child components and utilizing ES6 classes that extend React.component is a good approach. You could also consider using regular functions instead of classes (refer to the React documentation on Functions vs Class components). It's recommended to encapsulate the children within a <BaseLayout> component, which can apply a base CSS style to all other components in the project.

To implement this architecture and include Skeleton CSS, you can utilize a package manager such as npm install skeleton-css or yarn add skeleton-css, based on your project setup. After installing the package, you can import it like any other ES6 module.

Here's an example showcasing the usage of this architecture (assuming structural components are already defined):

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

// Adjust the path according to your file structure
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

Consider adding your css file to your React project for a seamless integration.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular Protractor

I am attempting to choose all of the tasks on . Unfortunately, only the first one is being updated. What can I do to select all of the elements: element.all(by.repeater('todo in todoList.todos')).then(function(rows) { for (var i = 0; i < ...

Publishing Your App on the Android Market with PhoneGap

Seeking a comprehensive PhoneGap tutorial that covers app publishing, especially struggling with successful app deployment. Currently experienced in HTML, CSS, and JavaScript. Any tips or advice would be greatly appreciated, thank you! I have a good gras ...

Having trouble getting a jQuery variable to work as an argument in an onclick function for an HTML

success: function(jsonresponse) { data = JSON.stringify(jsonresponse); $.each(JSON.parse(data), function (index, item) { var Id=item.id; var JobId=item.JobId; var eachrow = "<tr>" + "<td>" + item.id + "</td>" ...

Is there a way to conceal a div that holds a full table when the table consists of only one row?

I am relatively new to working with JS and HTML. I have attempted to use the following function, but unfortunately, I am not seeing any results. Any assistance would be greatly appreciated. Below is the JavaScript code as well as the HTML div and table whe ...

Firebase Functions utilizing Realtime Database to update nested child data

Every 10 minutes, a child is created inside my Realtime Database in Firebase through a webservice that sends data via the Rest API. When this data arrives, a function picks it up. The node contains various values, but the important one for further processi ...

Protecting an AJAX interface against unauthorized exploitation by external websites

We are in the process of creating a website that utilizes a basic JSON API (RoR) for displaying information on the page. This data is accessible to our clients, but crucial to our service, so we are taking precautions to prevent competitors from accessin ...

Switching a REACT NATIVE js file to an Android Activity is a process that involves integrating

Can anyone assist me with the process of transitioning from a REACT NATIVE Activity to a native android activity when a button is clicked in my JS file? I have scoured numerous resources but still need guidance on this. Your help would be greatly appreci ...

Can an area with a lower z-index be made clickable without using JS or an imagemap?

Recently, I created a website featuring a complex transparent header that extends over a portion of the main content. My goal was to limit the number of images on the site for both efficiency and cleaner code. Now, I'm faced with the challenge of mak ...

Display JSON document in Web Browser

While this may not be a coding inquiry, we value your thoughts in just a few words. When accessing the JSON URL in a browser, why does it prompt us to save the file? Is there a method to display it directly on the page? Are there any plugins that can ass ...

What is the process for reducing the value displayed on the label?

I have three labels and I would like to subtract the value of two labels and place the result in the third label. $(document).ready(function() { //Retrieve the values from both labels var value1 = document.getElementById("addition").innerText; ...

Attempting to create a lineup of bricks with varying widths that are directly related to the overall width of the canvas

I'm attempting to create a row of randomly sized bricks on a canvas. The bricks should have varying lengths, but must stay within the confines of the canvas. The canvas has a length of 400, and I want there to be a 10px padding on each side between ...

Transforming two child arrays within an object into a single array using Ramda

I am looking to transform an object into an array. The object I have is structured like this: const data = { t1: [ {"a": 1, "a1": 2}, {"b": 3, "b1": 4}, {"c": 5, "c1": 6} ], t2: [ {" ...

The react form fails to properly store user input within a formik fieldarray

I have encountered an issue with sending data from text boxes within a field array using Formik. The buttons for adding and deleting fields are working correctly, and data can be entered into the text boxes. However, when the form is submitted, the data en ...

What is the process for establishing a connection between two sets of data?

I am working with two mongoose models: user.js and note.js, which correspond to the collections notes and users. I want users to be able to save their notes, but I'm unsure how to create relationships between these collections. Ideally, I would like t ...

Building an HTML page that imports XML using XSLT transformations

Looking to enhance my HTML page by adding some content in a DIV using XML and XSLT. How can I import the XML and evaluate the corresponding XSLT? I attempted using iframe, but ran into issues with resizing to fit the content. I also tried utilizing the sc ...

Switching XML to JSON using React.js

Currently, I am in the process of developing an application with a requirement to retrieve data from a web API that provides XML responses. However, my objective is to obtain this information in JSON format, but unfortunately, the API does not offer suppor ...

Guide on displaying the AJAX response within an HTML or JSP element pulled from a database

description of image 1description of image 2How can I display an AJAX response from a database (map) on a JSP screen? I am able to retrieve the response in the browser console but unsure how to visually render it on the JSP page, like in a table or any ot ...

How to retrieve client's hostname using Node and Express

How can the client's hostname be retrieved in a Node / Express server? Is there a method similar to req.connection.remoteAddress that can be used to obtain the client's hostname? ...

Get the value of a function that was previously assigned to an onclick event using JavaScript

Here is the code snippet I am currently working with: document.getElementById(myid).onclick = function() { HandleGPIO(val1, val2); }; if (console) { console.log(document.getElementById(myid).getAttribute('onclick')); } My goal is to de ...

Achieving seamless integration between ReactJS and SocketIO with the added power of RxJS

I am encountering an issue with the code below. Although I can successfully retrieve the data using SocketIO, I have not been able to do so with RxJS 6. class App extends Component { constructor(props){ super(props); } state = { cluste ...