首页手记 React中使用styled-components的基础使用

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

标签：

React

今天我们不对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;

运行结果：