今天准备来给大家分享分享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;运行结果：
.修改样式的同时添加属性，同时也可以通过这种方法引入第三方的样式，只需要设置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;运行结果：
好啦，好啦今天就先到这里吧，希望各位大佬能指教指教我，实在不想指教一起约个正规保健也是可以的好吧