react的css样式

江咏之

发布于 2022-06-16 08:42:57

1.1K0

发布于 2022-06-16 08:42:57

文章被收录于专栏：技术社区

(1)在JSX文件中定义样式变量,和定义普通的对象变量一样

let backAndTextColor = {
    backgroundColor:'blue',
    color:'#ff671b',
    fontSize:40
};

(2)JSX的调用

<div style={backAndTextColor}>行内样式测试</div>

也可以直接写到JSX中,如下:

<div style={{backgroundColor:'blue',color:'#ff671b',fontSize:40}}>行内样式测试</div>

（1）定义一个CSS文件style.css,和普通CSS一样定义class选择器

.sty1{//和普通CSS一样定义class选择器
    background-color: red;
    color: white;
    font-size: 40px;
}

(2)在JSX中导入编写好的CSS文件

import './style.css';

(3)JSX的调用

<div className="sty1">看背景颜色和文字颜色</div>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-07-14，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度