前端知识笔记（二十六）———React如何像Vue一样将css和js写在同一文件

import styled from "styled-components"
export default () => {
  const Father = styled.div`
    width: 200px;
    height: 200px;
    background: pink;
    span {
      font-size: 20px;
    }
    &: hover {
      background: skyblue;
    }
  `
  const Son = styled.span`
    color: #f8e;
  `
  return (
    <>
      <Father>
        <Son>我是Son</Son>
      </Father>
    </>
  )
}

import { useState } from "react"
import styled from "styled-components"
export default () => {
  const Father = styled.div`
    width: 200px;
    height: 200px;
    background: pink;
    span {
      font-size: 20px;
    }
    &: hover {
      background: skyblue;
    }
  `
  const Son = styled.span`
    color: #f8e;
  `
  const Footer = styled(Father)`
    display: ${({ isShow }) => (isShow ? "block" : "none")};
    padding: 20px;
    border: 1px solid #333;
    border-radius: 30px;
  `
  const [show, setShow] = useState(false)
  return (
    <>
      <Father>
        <Son>我是Son</Son>
      </Father>
      <button onClick={() => setShow(!show)}>点我控制Footer的显示/隐藏</button>
      <Footer isShow={show}>我是Footer</Footer>
    </>
  )
}