css-in-js

一、介绍

​ CSS-in-JS是一种技术，而不是一个具体的库实现。简单来说CSS-in-JS就是将应用的CSS样式写在JavaScript文件里面，而不是独立为一些css，scss或less之类的文件，这样你就可以在CSS中使用一些属于JS的诸如模块声明，变量定义，函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义。CSS-in-JS在React社区的热度是最高的，这是因为React本身不会管用户怎么去为组件定义样式的问题，而Vue有属于框架自己的一套定义样式的方案。

​ styled-components 应该是CSS-in-JS最热门的一个库，通过styled-components，你可以使用ES6的标签模板字符串语法，为需要styled的Component定义一系列CSS属性，当该组件的JS代码被解析执行的时候，styled-components会动态生成一个CSS选择器，并把对应的CSS样式通过style标签的形式插入到head标签里面。动态生成的CSS选择器会有一小段哈希值来保证全局唯一性来避免样式发生冲突

二、安装

npm i -S styled-components

三、使用

jsx 

import React, { Component } from 'react'
import {
  DivStyled,
  QurireBtn,
  ResetBtn,
  ZIDBtn
} from './styledhome'
export default class Home extends Component {
  render() {
    return (
      <div>
          <h3>styled案例</h3>
          {/* 老式写法 */}
          {/* <div style={{ width:'100px',height:'100px',backgroundColor:'red'}}>
              <p>我是文本</p>
          </div> */}
          {/* 新式的写法 */}
          <DivStyled>
              <p>我是文本</p>
          </DivStyled>
          <QurireBtn>确定按钮</QurireBtn>
          <ResetBtn>取消按钮</ResetBtn>
          <ZIDBtn color="pink" size="12px">自定义按钮</ZIDBtn>
      </div>
    )
  }
}

 style

import styled from 'styled-components'
//给我们的第一个div加样式
// 这是样式组件  名字大写  其他styled。div  是用来替换div的
export const DivStyled = styled.div`
   width:100px;
   height:100px;
   background-color: red;
   p{
       font-size: 22px;
   }
`
//确定按钮样式
export const QurireBtn = styled.button`
  width:100px;
  height:25px;
  border: 1px solid #ccc;
  color:blue;
`
//取消钮样式   样式的继承
export const ResetBtn = styled(QurireBtn)`
  color:red;
`
//自定义btn  字体颜色我想着 谁调用当前组件 谁传递颜色 
// 传递属性进来  设置默认值
export const ZIDBtn = styled(QurireBtn)`
  color: ${ props=> props.color ? props.color : "blue" }; //写法1
  font-size: ${ props => props.size || '18px' }; //写法2