您现在的位置是:网站首页> 内容页

React中使用styled-components的基础使用

  • ju111net登陆
  • 2019-03-27
  • 344人已阅读
简介今天准备来给大家分享分享React中styled-components的基础使用,仅仅是我个人的一些理解,不一定全对,有错误还请大佬们指出,496838236这是我qq,有想指点我的大

今天准备来给大家分享分享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-componentsimport 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-componentsimport 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-componentsimport 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-componentsimport 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;

运行结果:

 

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

import React, { Component,Fragment} from "react";//引入styled-componentsimport 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-componentsimport 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-componentsimport 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;

运行结果:

 

 

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

  

  

  

  

文章评论

Top