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

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

运行结果：

 

4.修改样式的同时添加属性，同时也可以通过这种方法引入第三方的样式，只需要设置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;

运行结果：

 

 

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