本文共 3763 字，大约阅读时间需要 12 分钟。

　今天我们不对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 (    
   
        {    // 开始的内容    /* 
    
     大红牛
    
    
    枸杞11 */}    
        
    枸杞    
       )  }}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 (    
         
    红牛      
    
     枸杞
        
       )  }}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 (    
           
    红牛啊    
       )  }}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 (    
           
    红牛啊    
       )  }}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 (    
           
    红牛啊    
       )  }}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 (    
           
    红牛啊        
    
     枸杞啊
        
       )  }}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 (    
           
                
     红牛            
     
枸杞
        
        
       )  }}export default App;

运行结果：

原文

转载地址：http://rjwii.baihongyu.com/