与CSS加载相关 [英] Related to css loading

查看:35
本文介绍了与CSS加载相关的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我无法在我的React应用程序中加载样式表:

I am not able to load style sheet in my react app:

.App {
  text-align: center;
 }
.App p {
  color: blue;
}

我正在尝试在控制台上打印文件,这是空的.

I am trying to print file on console then this is empty.

推荐答案

如果要使用React从头开始项目,则可能需要学习如何使用捆绑工具,例如

If you are starting the project from scratch using React, you will probably need to learn how to use the bundling tools such as

  • Webpack
  • 汇总
  • 包裹

它们将使您能够使用css-loader之类的工具,使您可以通过以下方式将css文件导入标头中的react组件:

They will give you the ability to use tools like css-loader which will allow you to import your css file into your react component in the header in this way:

import 'app.css'

或者,您可以直接在组件上使用react'style'属性:

Alternatively, you can just use react 'style' attribute directly on the component:

const style = {
  app: {
    textAlign: 'center'
  },
  p: {
    color: 'blue'
  }
};

您可以通过以下方式应用样式:

And you can apply the style in this way:

<App style={style.app}>
  <p style={style.p}>Hello world!</p>
</App>

有关使用样式的更多信息,您可以在此处查看React官方文档: https://reactjs.org/docs/dom-elements.html#style

For more information of using style, you can check the React official docs here: https://reactjs.org/docs/dom-elements.html#style

这篇关于与CSS加载相关的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆