文档章节

React学习笔记:设置行内样式style属性

吾爱
 吾爱
发布于 2017/08/10 15:17
字数 88
阅读 531
收藏 0

阿里云携手百名商业领袖、技术大咖,带您一探行进中的数字新基建!>>>

在react中,可以这样来设置行内样式:

render() {
    const styles = {color:"red",fontSize:"16px"};
    return (
        <div style={styles}></div>
    );
}

注意 styles 是一个json对象,key对应css属性名并且转为驼峰式命名。

更加便捷的写法:

render() {
    return (
        <div style={{color:"red",fontSize:"16px"}}></div>
    );
}

参考:https://react-cn.github.io/react/tips/inline-styles.html

© 著作权归作者所有

吾爱
粉丝 143
博文 272
码字总数 91680
作品 0
后端工程师
私信 提问
加载中

评论(0)

React学习(10)-React中编写样式CSS(styled-components)

前言 React是一个构建用户界面的js库,从UI=render()这个等式中就很好的映射了这一点,UI的显示取决于等式右边的render函数的返回值. 而编写React应用,就是在编写React组件,组件中最重要的数据...

itclanCoder
2019/10/22
0
0
CSS in JS 简介

1、 以前,网页开发有一个原则,叫做"关注点分离"(separation of concerns)。 它的意思是,各种技术只负责自己的领域,不要混合在一起,形成耦合。对于网页开发来说,主要是三种技术分离。...

阮一峰
2017/04/05
0
0
聊一聊 React 中的 CSS 样式方案

和 Angular,Vue 不同,React 并没有如何在 React 中书写样式的官方方案,依靠的是社区众多的方案。社区中提供的方案有很多,例如 CSS Modules,styled-components,styles jsx 等等。 接下来...

osc_ai011l20
03/23
1
0
React对比Vue(02 绑定属性,图片引入,数组循环等对比)

import React, { Component } from 'react';import girl from '../assets/images/1.jpg' //这个是全局的不要this.state.girl 直接{girl}调用// import common from '../assets/css/common.c......

osc_gay6i4ve
2019/03/05
2
0
学习html+css第五天的笔记

昨日回顾 属性设定形式: css属性名:css属性值; 样式的分类: 1,内部样式: 2,外部样式: 3,行内样式:

yang名扬
2014/03/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

web前端入门知识大全:系统路线,各类要点解析

一、WEB前端是什么? 使用HTML/CSS/JS以及更多的框架技术,编写网站页面、App应用、小程序、2D&3D游戏、Web VR&AR等应用,通过内容设计、交互动画、数据操作构建项目与用户的交互界面。前端开...

梦想编程
36分钟前
11
0
一个软件测试7年的程序员,讲述自己两年突破瓶颈的经验,关注这些能让你少走弯路。

突破自己的技术瓶颈并不是一蹴而就,还是需要看清楚一些东西,这里也有一些经验和见解跟大家分享一下。同样是职场人士,我也有我的经历和故事。在工作期间,我有过2年加薪7次的小小“战绩”(...

爱码小哥
45分钟前
8
0
ReentrantLock 读写锁

写写共享 读写互斥 写写互斥 适合读多的业务 提高效率 import java.util.concurrent.locks.ReentrantReadWriteLock;import java.util.concurrent.locks.ReentrantReadWriteLock.ReadLock;......

Joker上上签
47分钟前
19
0
IM即时通讯 时间处理1

function formatDate(now) { let date = new Date(now); let Y = date.getFullYear() + '-'; let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getM......

lsy999
47分钟前
9
0
rust tokio mpsc 异步发送数据

启动两个异步任务,一个阻塞在键盘输入。一个间歇的读取通道,有数据就输出。在快速输入的时候会卡住,因为 mpsc 的 buffer 设置为了 5。 代码如下: use std::io;use tokio::task;use to...

Anunakee
48分钟前
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部