(79条消息) react函数式组件项目快速搭建_️�あの的博客-CSDN博客

1.项目基础已搭建后，在idea终端或cmd中输入以下命令

npm install styled-components

2.使用方法

idea可以导入该插件方便修改（非必须）

1.基本使用

Hello.js

import styled from 'styled-components'const HelloCss = styled.div`
color: red;
`const Hello = () => {return(<HelloCss>hello world</HelloCss>)
};export default Hello;

注stlyed.div``里面像往常css那样写样式，想使用该样式的地方就可以将div换成该样式组件名

2. 我们还可以通过标签名和类名设置样式组件中的html标签的样式：

idnex.js

import styled from 'styled-components'const HelloCss = styled.div`color: red;/* 应用于组件里的h3标签 */h3 {color: red}/* 应用于组件里的className为blue的html标签 */.blue {color: blue}
`const Hello = () => {return(<HelloCss>hello world<p>aaaaaaaaa</p><h3>bbbbbbbbbbbb</h3><p className="blue" >cccccccccccc</p></HelloCss>)
};export default Hello;

css文件组件化（不需要再创css文件了）相关推荐

Vue（组件化编程：非单文件组件、单文件组件）
一.组件化编程 1. 对比传统编写与组件化编程(下面两个解释图对比可以直观了解) 传统组件编写:不同的HTML引入不同的样式和行为文件组件方式编写:组件单独,复用率高(前提组件拆分十分细致) 理解为 ...
echarts国内各省份地图js/json文件，全球地图js文件/汉化，字符云js文件
echarts国内各省份地图js/json文件,全球地图js文件/汉化,字符云js文件下载链接世界地图中国地图国内各省份地图字符云下载链接 https://github.com/FuHan ...
Vue2基础、组件化编程、脚手架、Vuex、Vue路由、UI组件库
尚硅谷张天禹老师讲课学习视频 1.Vue简介 Vue2中文官网 1.1 Vue 介绍一套用于构建用户界面的渐进式JavaScript框架构建用户界面:把数据通过某种办法变成用户界面渐进式:可以 ...
Vue全家桶（一）：Vue基础+Vue-Cli+Vue组件化+过渡动画
目录 1.Vue概述 1.1 认识Vue 1.2 Vue的两核心 1.3 Vue的初体验 1.4 Vue的生命周期 2. Vue-CLI (Command Line Interface) 3. Vue ...
Vue第七章：项目环境配置及单文件组件 vue脚手
第七章:项目环境配置及单文件组件 vue脚手架回顾: 组件之间的通信父传子:正向传递 vue允许自动触发 props 1.先在子组件中定义期待的属性名和类型 2.在父组件中调用子组件 ...
Web应用的组件化（一）——基本思路
原文链接:https://github.com/xufei/blog/issues/6 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然 ...
vue（9）—— 组件化开发 - webpack（3）
前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热前期准备创建如下项目: app.js: footer.js: main.js: webpack.con ...
Vue系列之单文件组件
文章目录前言一.什么是单文件组件? 二.单文件组件的结构三.如何引入并使用单文件组件 1. B组件中需导出(export) 2. A组件中需导入并局部注册B(import) 前言 Vue应用的一 ...
如何通过 Vue＋Webpack 来做通用的前端组件化架构设计
目录: 1. 架构选型 2. 架构目录介绍 3. 架构说明 4. 招聘消息目前如果要说比较流行的前端架构哪家强,屈指可数:reactjs.angularjs.emberj ...

css文件组件化（不需要再创css文件了）

(79条消息) react函数式组件项目快速搭建_️�あの的博客-CSDN博客

1.项目基础已搭建后，在idea终端或cmd中输入以下命令

2.使用方法

css文件组件化（不需要再创css文件了）相关推荐

最新文章

热门文章