内联样式

• 值 是对象 （将style属性映射成对象）

<div style={{width:200+300,height:1==1?200:300,backgroundColor:'red'}}></div>

引入外部样式

• import ‘./style.css’
  import ‘./style.scss’

css in js

• styled-components

// 安装
npm i styled-components -S

import styled, {keyframes} from 'styled-components'
// 定义一个 logo组件
// 渲染成一个组件 标签h1 样式 是 引号中的样式
const Logo = styled.h1`
  width: 300px;
  height: 400px;
  color:red;
  border: 1px solid #333;
`
// 嵌套
const Container = styled.div`
  width: 300px;
  height: 300px;
  border:1px solid red;
  p {
    color:red;
  }
  span {
    color: blue;
  }
`

// 继承
const QfBtn1 = styled.button`
  padding: 20px;
  border: 1px solid #123987;
  border-radius: 5px;
`
const QfBtn2 = styled(QfBtn1)`
  background: tomato;
`

// props传参
const Box = styled.h1`
  width: 300px;
  height: 400px;
  border: 1px solid #333;
  background: ${props => props.bgc?props.bgc:'red'}
`
// 定义关键帧
const ani = keyframes`
  0%{
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(45deg);
  }
`
// 动画
const Move = styled.div`
  width: 8px;
  height: 100px;
  background: red;
  transform-origin:center bottom;
  margin: 50px auto;
  animation: ${ani} 100ms linear infinite alternate;
`

export {
  Logo,
  Container,
  QfBtn1,
  QfBtn2,
  Box,
  Move
}