day9: CSS style 规划 - CSS in JS(emotion 使用 - 3)

 使用 styled 方式

 这个方式其实是 emotion 参考 styled-component,

 写法是 `styled.` 任一 html element, 这样就会形成一个带 props 的 style component
npm i @emotion/styled
import styled from '@emotion/styled'

const Button = styled.button`
  color: turquoise;
`

render(<Button>This my button component.</Button>)

如果要判断 button 是否有 active 来改变颜色传,则可以传 props 进到 <Button> ,只要在 <Button> 增加 active 的 props,内部再针对是否有 active 去做判断就可以达成

import styled from '@emotion/styled'

const Button = styled.button`
  color: ${props=>props.active?:'red':'blue'};
`

render(<Button active>This my button component.</Button>)

也可以使用一个现有的 component 并附加 emotion 的 styled

import styled from '@emotion/styled'
const Basic = ({ className }) => (
  <div className={className}>Some text</div>
)

const Fancy = styled(Basic)`
  color: hotpink;
`

render(<Fancy />)

或是将 emotion 的 styled parent 传进任意的 child 也很方便

import styled from '@emotion/styled'

const Child = styled.div`
  color: red;
`

const Parent = styled.div`
  ${Child} {
    color: green;
  }
`

render(
  <div>
    <Parent>
      <Child>Green because I am inside a Parent</Child>
    </Parent>
    <Child>Red because I am not inside a Parent</Child>
  </div>
)

<<:  【PHP Telegram Bot】Day15 - 基础(4):阵列处理、JSON

>>:  OpenTelemetry 与 Jaeger 应用

[30天 Vue学好学满 DAY14] prop & emit-1

组件中经过引用、连接,会产出树状关系图,即为父元件与子元件的关系。 -> 父子元件中不存在继承...

[ Day 5 ] - 物件

物件 物件的格式 会使用 { } 前後包住资料集 内容会有属性和值 let shop = { Nam...

[day-1] 前言、建置基础开发环境

前言 HI , 大家好 我是Mouchi也可以叫我『麻糬』 写这篇文章主要是督促自己每天要有一定的学...

DAY24 - 现有的专案可以升级的地方(梦)

前言 今天是铁人赛的第二十四天,24、25、26这三篇都是ON档,後面的 27、28、29 已经写完...

追求JS小姊姊系列 Day3 -- 我知道很怪,但你不好奇字串姐变身会怎样吗(上)

前情提要 字串姐突然大喊一声:**转型数字!**後,眼前的人竟然变成数字姐了?! 旁白:剧情先在这暂...