[react基础] css-in-js

安装

npm i -S styled-components

定义样式

# 样式js文件
import styled from 'styled-components'
const Title = styled.div`
  color:red;
  font-size:16px;
  h3{
    color:blue;
    font-size:20px;
  }
`
export {
  Title
}

// 就像使用常规 React 组件一样使用 Title
import React, { Component } from 'react'
import { Title } from './Styles'
class App extends Component {
  render() {
    return (
      <div>
        <Title>
           我只是一个标题
           <h3>你好世界</h3>
        </Title>
      </div >
    );
  }
}
export default App

样式继承

属性传递