在react中使用styled-components写css样式 (真香)

首先优点就是 可以不用装node-sass、less那些了

安装

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 的中级使用

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


attrs调用之后，也是返回一个函数
const XInput = styled.input.attrs({
  placeholder: "请输入密码",
  paddingLeft: "20px"
})`   
  border-color: red;
  padding-left: ${props => props.paddingLeft};

  &:focus {
    outline-color: orange;
  }
`
//调用attrs函数中，props对象中保存着属性值

给组件传递state中的值
const XInput = styled.input`
	color: ${props => props.color}
`
<XInput color="blue">
</XInput>

 

css in js 的高级使用

const StyleDiv1 = styled.div`
	padding: 10px 20px;
`

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


主题定制
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提供智能提示。