react 中 css in js 的基本使用

前言

react项目中，更提倡组件化方案，自然形成了将HTML、CSS、JavaScript集中编写管理的方式，就引出了css in js这种方案。

有很多流行的第三方库，比如： styled-components

安装

npm install styled-components

css in js的基本使用：

import styled from 'styled-components'

const BackStyle = styled.div`
	font-size: 20px;
	color: red;
`

function App() {
    return (
    	<BackStyle>
        	<p>jamas</p>
        </BackStyle>
    )
}

styled-components中包含各种标签同名的函数，在写样式的时候，就调用函数就行，重点是使用标签模板字符串的形式来调用函数。

函数返回一个react的组件。

const BackStyle = styled.div`
	font-size: 20px;
	color: red;
`

//这里就是调用styled-components 中的div函数，使用的是标签模板字符串的形式
//每个样式后面，必须写分号。标签模板字符串会从这里进行分割

在css in js中写的写法形式，跟less scss基本一样，可以嵌套，可以使用伪元素 伪类等等。

const Style = styled.div`
  color: purple;
  h2 {
    font-size: 50px;
  }
  ul > li {
    color: orange;
    &.active {
      color: red;
    }
    &:hover {
      background: #aaa;
    }
    &::after {
      content: "abc"
    }
  }
`

css in js 的中级使用

1. props穿透

   const XInput = styled.input`
     border-color: red;
   `
   <XInput type="password"/>
    //这里的type属性就会传递到input标签中
   

2. attrs函数使用

   attrs调用之后，也是返回一个函数

   const XInput = styled.input.attrs({
     placeholder: "请输入密码",
     paddingLeft: "20px"
   })`   
     border-color: red;
     padding-left: ${props => props.paddingLeft};
   
     &:focus {
       outline-color: orange;
     }
   `
   
   //调用attrs函数中，props对象中保存着属性值
   

3. 给组件传递state中的值

   const XInput = styled.input`
   	color: ${props => props.color}
   `
   
   <XInput color="blue">
   </XInput>
   

css in js 的高级使用

1. 继承

   当有着相同的样式时，就可以使用继承来实现

   const StyleDiv1 = styled.div`
   	padding: 10px 20px;
   `
   
   const StyleDiv2 = styled.div(StyleDiv1)`
   	color: red;
   `
   //StyleDiv2 就拥有了StyleDiv1的padding属性了
   

2. 主题定制

   import { ThemeProvider } from 'styled-components';
   
   <ThemeProvider theme={{color: "red", fontSize: "30px"}}>
     <App />
   </ThemeProvider>
   
   //在App子组件中，就可以拿到共享的数据
   const StyleInput = styled.input`
   	color: ${props => props.theme.color}
   `
   

插件推荐

vscode-styled-components 为写css in js提供智能提示。

结语

这篇完全是为了自己能够看懂，做的笔记；跟着coderwhy老师的节奏走，大神勿喷。