今天准备来给大家分享分享React中styled-components的基础使用,仅仅是我个人的一些理解,不一定全对,有错误还请大佬们指出,496838236这是我qq,有想指点我的大佬随时加我qq好吧,要是想约我一起做保健,那我只能随叫随到了

好了,废话不多说,开工

 今天我们不对react的环境进行搭建,我直接用脚手架搭一个最简单的环境来用,进入主题

 1.使用styled-components

  首先我们要安装styled-components

yarn add styled-components  ||  npm install --save styled-components

2.最基础的使用,(为了方便阅读,以下所有的代码我将在一个文件中演示)

  

import React, { Component,Fragment} from 'react';
//引入styled-components
import styled from 'styled-components' //修改了div的样式
const Title = styled.div`
font-size:1.5rem;
color:red
`
// 修改了button的样式
const Button = styled.button`
border:none;
background-color:blue
` class App extends Component {
render() {
return (
<Fragment>
{
// 开始的内容
/* <div>大红牛</div>
<button>枸杞11</button> */}
<Title>大红牛</Title>
<Button>枸杞</Button>
</Fragment>
)
}
}
export default App;

运行结果:

是不是很爽,其实到这里完全就可以用styled-components来写类似于CSS的代码了,但是这肯定不够啊,所以我们继续往下看

2.塑造组件

  为什么要有塑造塑件呢,因为肯定会有一个场景,我们要对已经定义好的组件进行二次样式的修改,那这个时候我们就需要用塑造组件了

import React, { Component,Fragment} from 'react';
//引入styled-components
import styled from 'styled-components' //初始组件
const Button = styled.button`
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`
//对组件进行二次样式修饰
const YellowButton = styled(Button)`
background-color:yellow
` class App extends Component {
render() {
return (
<Fragment>
<Button>红牛</Button>
<YellowButton>枸杞</YellowButton>
</Fragment>
)
}
}
export default App;

运行结果:

3.props传递参数  styled-components可以用props接受参数,从而根据传递的参数确定样式,是不是很强大

 

import React, { Component,Fragment} from 'react';
//引入styled-components
import styled from 'styled-components' //props传递参数(根据参数的值设置样式)
// 有传递值字体会变为红色
// 无传递值会默认取蓝色
const Button = styled.button`
padding: 0.5em;
margin: 0.5em;
color: ${ props => props.inputColor || "blue" };
background: papayawhip;
border: none;
border-radius: 3px;
` class App extends Component {
render() {
return (
<Fragment>
<Button inputColor="red">红牛啊</Button>
</Fragment>
)
}
}
export default App;

运行结果:

除了可以根据参数的值进行样式的设置之外,我们还可以通过参数的有无来设置样式:

import React, { Component,Fragment} from 'react';
//引入styled-components
import styled from 'styled-components' //props传递参数(根据参数的有无设置样式)
// 有参数背景会变为蓝色
// 无传递值背景会默认取黄色
const Button = styled.button`
padding: 0.5em;
margin: 0.5em;
background: ${props=>props.blue?"blue":"yellow"};
border: none;
border-radius: 3px;
` class App extends Component {
render() {
return (
<Fragment>
<Button blue>红牛啊</Button>
</Fragment>
)
}
}
export default App;

运行结果:

.修改样式的同时添加属性,同时也可以通过这种方法引入第三方的样式,只需要设置className属性即可

import React, { Component,Fragment} from 'react';
//引入styled-components
import styled from 'styled-components' //props传递参数(根据参数的有无设置样式)
// 有参数背景会变为蓝色
// 无传递值背景会默认取黄色
const Button = styled.button.attrs({
title:"aaa",
id:'bbb',
'data-role':(props)=>props.hello
})`
padding: 0.5em;
margin: 0.5em;
border: none;
border-radius: 3px;
` class App extends Component {
render() {
return (
<Fragment>
<Button hello="hi">红牛啊</Button>
</Fragment>
)
}
}
export default App;

运行结果:

  通过控制台我们可以看到,属性已经全部被加上去了

5.继承

import React, { Component,Fragment} from 'react';
//引入styled-components
import styled from 'styled-components' //继承 根据实验 如果我没出错 最新的版本应该是不支持extend了
const Button = styled.button`
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border-radius: 3px; ` const YellowButton = Button.extend`
color: yellow;
border-color: yellow; `; class App extends Component {
render() {
return (
<Fragment>
<Button>红牛啊</Button>
<YellowButton>枸杞啊</YellowButton>
</Fragment>
)
}
}
export default App;

6.偷懒的写法,当标签很多时,要是我们虽每个标签都要进行修饰,那岂不是要写好多的组件,但是在有些情况下我们没必要分这木多组件,那我们不妨可以试试以下的写法

  

import React, { Component,Fragment} from 'react';
//引入styled-components
import styled from 'styled-components' //另一种语法
const StyledDiv = styled.div`
font-size: 100px;
> span {
font-size: 50px;
}
& > p {
font-size: 25px;
}
` class App extends Component {
render() {
return (
<Fragment>
<StyledDiv>
<span>红牛</span>
<p>枸杞</p>
</StyledDiv>
</Fragment>
)
}
}
export default App;

运行结果:

好啦,好啦今天就先到这里吧,希望各位大佬能指教指教我,实在不想指教一起约个正规保健也是可以的好吧

  

  

  

  

React中使用styled-components的基础使用的更多相关文章

  1. React中最基础的jsx语法

    import React, { Component } from 'react'; class App extends Component { render() { return ( <div ...

  2. styled components草根中文版文档

    1.styled components官网网址 https://www.styled-components.com/docs   以组件的形式来写样式. 1.1安装 yarn add styled-c ...

  3. 【Web技术】401- 在 React 中使用 Shadow DOM

    本文作者:houfeng 1. Shadow DOM 是什么 Shadow DOM 是什么?我们先来打开 Chrome 的 DevTool,并在 'Settings -> Preferences ...

  4. 聊一聊 React 中的 CSS 样式方案

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

  5. React中的合成事件

    React中的合成事件 React自己实现了一套高效的事件注册.存储.分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大程度地解决了IE等浏览器的不兼容问题. ...

  6. React中使用CSSTransitionGroup插件实现轮播图

    动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...

  7. React 深入系列1:React 中的元素、组件、实例和节点

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中 ...

  8. React 中阻止事件冒泡的问题

    在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达 ...

  9. [Web 前端] mobx教程(三)-在React中使用Mobx

    copy from : https://blog.csdn.net/smk108/article/details/85053903 Mobx提供了一个mobx-react包帮助开发者方便地在React ...

随机推荐

  1. Linux和Windows下tomcat开机自启动设置

    Linux下tomcat的开机自启动设置 1.修改系统文件rc.local:vi /etc/rc.d/rc.local rc.local是给用户自定义启动时需要执行的文件,和windows里面的“启动 ...

  2. php函数式编程

    // 函数式编程 $users = array( array('id' => 1, 'name' => 'abc1', 'age' => 29, '性别' => '男'), a ...

  3. MySQL:锁

    根据加锁的范围,MySQL的锁可以分为全局锁,表级锁和行锁. 1. 全局锁 一般用于全局逻辑备份操作: 1.1 FTWRL MySQL提供了一个加全局读锁的方法.命令是:Flush tables wi ...

  4. Go语言之Interface(一)

    Go语言之Interface(一) 什么是interface 在面向对象语言中接口是:接口定义了一个对象的行为,但在Go中接口就是方法签名的集合,当一个类型提供了这个接口中的所有的方法,就可以说这个类 ...

  5. msysGit在GitHub代码托管

    (转:http://www.cnblogs.com/xing901022/p/4388190.html) 代码的管理,在日常开发中是很重要的环节,程序员的修炼三部曲——版本控制,单元测试,项目自动化. ...

  6. jq的ajax交互封装

    jq封装的ajax,然后 在此前和此后都是很多要考虑的  ,何不 想想构思封装下. 下面: 基本上网页都存在各种ajax,使得网页变得更加易于操作. 举个长长的例子吧: <input type= ...

  7. LoadRuner12.53教程(二)

    使用HP Web访问示例应用程序 shǐ使   yòng用   H   P   W   e   b   fǎng访   wèn问   shì示   lì例   yìng应   yòng用   chén ...

  8. maven package,clean,install,compile命令

    1.Ideal中显示 2.各个阶段干嘛的? compile,编译命令,会在项目路径下生成一个target目录,在该目录中包含一个classes文件夹,里面全是生成的class文件及字节码文件 pack ...

  9. Linux 源码安装 FFmpeg

    加班次数频繁,已经快一年没有写博了.由于此次在项目中使用到了 FFmpeg 来处理音视频,顾记录下在 Linux 系统中源码安装 FFmpeg 以便不时之需. 1. 安装 yasm yasm 是一个汇 ...

  10. macOS 系统 .DS_Store 文件详解

    .DS_Store 文件 .DS_Store 是 Finder 用来存储这个文件夹的显示属性的:比如文件图标的摆放位置. 显示/隐藏 Mac 隐藏文件 显示:defaults write com.ap ...