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?