Maison> interface Web> js tutoriel> le corps du texte

react可以引入css吗?

青灯夜游
Libérer: 2020-12-04 09:51:41
original
2310 Les gens l'ont consulté

react可以引入css,方法:1、直接在组件内部使用“style={{css样式}}”来引入css;2、render函数中先声明一个变量保存样式表绑定给style属性,然后引用;3、使用“import 'css路径'”引入css文件。

react可以引入css吗?

本教程操作环境:windows7系统、react16版,该方法适用于所有品牌电脑。

推荐学习:《编程视频

在React中是可以引入css的。但,如果直接按下面的方式写内联样式会直接报错,因为JSX语法不支持。

测试数据
//报错
Copier après la connexion

React支持以下三种写css的方法:【相关教程推荐:React视频教程

1、行内样式:直接在组件内部定义

... 
测试数据
...
Copier après la connexion

2、声明样式:在render函数中先声明,再引用

声明样式和行内样式类似,区别只是声明一个变量保存样式表绑定给style属性。

render() { let mystyle = { width:'200px', height:'80px', backgroundColor:'yellow',      fontSize:'24px',      textAlign:'center'   } return( 
测试数据
); }
Copier après la connexion

3、使用import引入外部的css样式文件

一个React组件一般就是一个文件夹,文件夹里包含对应的js和css,只要在js中引入同级的css即可。

import './mystyle.css';
Copier après la connexion

想要查阅更多相关文章,请访问PHP中文网!!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!