React中使用CSS， 知识点的补充

1. styled-components

【 1. styled的下载 】
npm install styled-components -D

【 2. styled的简单使用 】
import React,{Component} from 'react'
import styled from 'styled-componnets'

const AppDiv = styled.div`  【 styled后面跟的是标签元素名，它返回的是一个组件，所以是可以直接使用的 】
	font-size: 50px;
	color: red;
`

class App extends Component {
	render() {
  	return (
    	<AppDiv />
    )
  }
}

1. 【 styled】的返回值是一个组件，styled可以跟很多html元素标签名，这些生成的组件，返回的组件会带一些样式
2. 样式的嵌套书写

import React,{Component} from 'react'
import styled from 'styled-componnets'

const AppDiv = styled.div`
	font-size: 50px;
	color: red;
	.banner {
		background-color: red;
	}
`
class App extends Component {
	render() {
  	return (
    	<AppDiv>
      	<div className="banner"></div>
      </AppDiv>
    )
  }
}

3. 使用【 styled-components 】的使用类似于【less/scss/styles】，尤其是与less和sass的语法相似很多，所以会使用less，styled的使用也会有什么问题
4. 在开发的时候，会有单独的【JS】文件，使用哪一个，直接导出。

2. 动态添加属性[styled]

1. 当使用了【styled-components】时候，返回一个组件，如果想要给元素设置属性，那么给元素设置属性有两种方式

【 设置在样式组件上的属性 】
import React,{Component} from 'react'
import styled from 'styled-componnets'

const AppInput = styled.input`
	color: red;
	font-size: 15px;
`

export default class App extends Component {
	render() {
  	<form>
      【 可以直接在样式组件上给input设置属性，属性会通过props穿透，会直接设置到input标签上 】
    	<AppInput type="password" />
    </form>
  }
}


【 styled的attrs属性，通过这个属性可以给元素设置属性 】
const AppInput = styled.input.attrs({ 【 attrs是一个方法，方法接收参数，给元素设置的属性 】
	type: 'password'
})`
	color: red;
	font-size: 15px;
`

export default class App extends Component {
	render() {
    <form>
    	<AppInput />
    </form>
  }
}

【 attrs里面设置的属性是不变的 】

2.1 attrs属性

1. 通过这个属性可以给【styled】组件设置属性，本身【attrs】是一个方法，方法接收一个对象作为参数，【attrs】的返回值是一个函数，可以在后面继续调用

【 1. 普通的使用 】
const AppInput = styled.input.attrs({
	type: 'password'
})`
	color: red;
	font-size: 15px;
`

【 2. 设置自定义其他的属性 】
const AppInput = styled.input.attrs({
	type: 'password',
  borderColor: 'red' 【01. 自定义一个属性 】
})`
	color: red;
	font-size: 15px;
	border-color: ${ props => props.borderColor } 【02. 使用自定义的属性 】
 【 箭头函数有一个参数props,他会接收到attrs里面设置的所有属性值，所以可以通过props能拿到自定的属性值 】
`

【 3. 想要使用组件状态里面的值 】
const AppInput = styled.input.attrs({
	type: 'password'
})`
	color: ${props => props.color};
	font-size: 15px;
`
export default class App extends Component {
	state = {
  	color: 'red'
  }
  render() {
    <form>
    	<AppInput color={ this.state.color }/>
    </form>
  }
}
【 注意：在样式组件上设置的属性会与attrs属性中设置的属性进行合并，所以也是可以通过props拿到传递过来的值 】

3. styled的高级特性

3.1 继承

1. 在开发的过程中，可能会遇到的是，同一个页面有很多的btn或者是其他的元素，他们中有一部分样式是相同的，在styled里，是可以继承上一个组件上的样式

const AppButton = styled.button`
	color: red;
	font-size: 15px;
	padding: 15px;
`

const AppButtonS = styled(AppButton)` 【 继承上一个组件样式 】
	background-color: red;
	border-color: red;
`

3.2 设置主题

1. 在一个开发时，一个项目里面的不同页面的主题，文字大小，都是相同的，可以将样式设置到统一的地方，然后进行使用

【 在某一个组件设置了样式，在其他的组件也用到了相同的 】
import styled,{ ThemeProvider } from 'styled-componnets'

const AppButton = styled.button`
	color: red;
	font-size: 15px;
	padding: 15px;
`
export default function App () {
	return (
  	<AppButton theme={{ color:"red" }}/> 【 设置共享属性 】
  )
}

/********************/
const AppButton = styled.button`
	color: ${ props => props.theme.color }; 【 使用共享的样式 】
	font-size: 15px;
	padding: 15px;
`

export default function Header () {
	return (
  	<AppButton />
  )
}

4. 动态设置类名(原生)

import React,{Component} from 'react'

export default class App extends Component{
	state = {
  	isActive:true
  }
	render () {
  	return (
    	<div>
      	<span className="foo dis title">第一种:添加多个属性</span>
        【 弊端，这样书写，最后编译后是两个类名合并，解决方式，给某一个类名前面加上空格，即可 】
        <span className={'title' + (isActive ? active : '' )}>第二种:动态的添加</span>
        【 在使用数组的方式的时候，需要注意的是，当数组编译后，每一个类名之间是逗号的形式分割需要使用【join】处理,以空格进行分割 】
        <span className={['title',(isActive ? active : '')].join(" ")} >第三种:以数组的形式技进行设置</span>
      </div>
    )
  }
}