React学习笔记003-内外联样式

React中设置组件样式一共有两种方式，一种是直接写在组件style属性上的内联样式，另外一种是在组件外定义的外联样式。

内联样式

比较简单，就是将一个css键值对对象赋值给组件的style属性。注意两点，一个是css属性名的写法是js中css属性写法(background-color -> backgroundColor)；二是双大括号，因为这里相当于使用到一个变量，外层大括号相当于jsx语法。

      {/**1.内联样式 */}<divstyle={{ width: "100px", height: "100px", backgroundColor: "red" }}></div>

等价于:

  const inLineStyle = { width: "100px", height: "100px", backgroundColor: "red" };return (<div>{/**1.内联样式 */}<divstyle={inLineStyle}></div></div>);

效果:

这种用得不多，设置简单一两条属性还行，多了就影响jsx代码段的观感，临时用用。

另外，内联样式不支持伪类和媒体查询，请使用第三方包如radium以支持。

外联样式

1.最常用的，全局引入css样式文件:

新建同级目录下.css文件

.out-line-box {width: 100px;height: 100px;background-color: hotpink;
}

注意引入css

import "./App.css";function App() {return (<div>{/**2.外联样式 */}<div className="out-line-box"></div></div>);
}export default App;

效果:

这种用得最多，实际工作中，很可能使用到这种的变体，也就是引入scss和less文件，这个大同小异。

2.组件级别引入

如果想控制样式在组件级别，可以这样做:

样式文件名字中间价module，内容不变(变量名貌似不支持-，我改成了下划线_)，引入方式变成:

.out_line_box {width: 100px;height: 100px;background-color: hotpink;
}

import style from "./App.module.css";function App() {return (<div>{/**2.外联样式(组件级别) */}<div className={style.out_line_box}></div></div>);
}export default App;

查看元素，发现className变了，加了前后缀:

3.使用styled-components组件

先npm install安装一下

npm i styled-components -S

然后引入，创建:

import styled from "styled-components";// 自定义标签(首字母大写)
const SectionDiv = styled.div`width: 100px;height: 100px;background-color: hotpink;
`;function App() {return (<div>{/**2.外联样式(使用styled-components, 可在js中直接写样式创造复合样式的组件) */}<SectionDiv /></div>);
}export default App;

如果想给这个自定义组件加额外的属性(比如class)，可以这样做:

const SectionDiv = styled.div.attrs({className: "box1 box2",
})`width: 100px;height: 100px;background-color: hotpink;
`;

如果想把所有东西(CSS-IN-JS)都集成到js中，这个方式可以考虑一哈。

React学习笔记003-内外联样式相关推荐

react render没更新_web前端教程分享React学习笔记（一）
web前端教程分享React学习笔记(一),React的起源和发展:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写 ...
react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
React学习笔记：入门案例
React学习笔记:入门案例 React 起源于 Facebook 内部项目,因为市场上所有 JavaScript MVC 框架都不令人满意,公司就决定自己写一套,用来架设 Instagram 的网站 ...
React学习笔记(五) 状态提升
状态提升究竟是什么东西呢?别急,下面让我们一步一步来看看究竟要怎么使用状态提升假设我们有这样一个需求,提供两个输入框(分别属于两个组件),保证输入框里面的内容同步好,下面我们先来封装一个输入框组件 ...
React学习笔记 - 组件Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
Vue.js 学习笔记七控制样式
Vue.js可以灵活的控制样式我们首先随便写2个样式 <style>.divCss {background-color: green;width:400px;height:400px;} ...
React学习笔记八-受控与非受控组件
此文章是本人在学习React的时候,写下的学习笔记,在此纪录和分享.此为第八篇,主要介绍非受控组件与受控组件. 目录 1.非受控组件 1.1表单提交案例 1.2案例的总结 2.受控组件 2.1受控组件 ...
React学习笔记二：实现一个数字时钟
<!DOCTYPE html> <html lang="zhm"><head><meta charset="UTF-8" ...
React学习笔记3：React脚手架
使用create-react-app创建react应用 react脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置(语法检查.jsx编译.devServe ...

React学习笔记003-内外联样式

React学习笔记003-内外联样式相关推荐

最新文章

热门文章