我主要在React Native中使用React，现在我正在构建一个网站，所以我在React应用程序中实现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等等。但是这些类没有被应用。我试着复制粘贴这个演示登录页，但它看起来不一样。(当然我改了className的类(
我在这里有遗漏的步骤吗？
您需要重新思考应用程序的体系结构。您复制到本文中的HTML页面在React应用程序中没有意义，因为它应该用JSX组件编写(大多数时候(。
React有很多体系结构模式，但我通常喜欢从ES6开始，包括子组件和扩展React.component的ES6类。您可以使用常规函数而不是类(查看函数与类组件的React文档(。我将把子级封装在<BaseLayout>组件中，该组件为项目中的所有其他组件提供基本CSS。
为了使用这种体系结构并包含Skeleton CSS，我会利用包管理器npm install skeleton-css或yarn add skeleton-css，这取决于您在项目中使用的是哪一个。一旦您这样做了，您就可以像任何其他ES6 include一样添加它。
示例(假设制造了一些结构部件(：
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,
}
尝试在React应用程序中导入css文件。