今天准备来给大家分享分享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接受参数，从而根据传递的参数确定样式，是不是很强大
