使用 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
组件中经过引用、连接,会产出树状关系图,即为父元件与子元件的关系。 -> 父子元件中不存在继承...
物件 物件的格式 会使用 { } 前後包住资料集 内容会有属性和值 let shop = { Nam...
前言 HI , 大家好 我是Mouchi也可以叫我『麻糬』 写这篇文章主要是督促自己每天要有一定的学...
前言 今天是铁人赛的第二十四天,24、25、26这三篇都是ON档,後面的 27、28、29 已经写完...
前情提要 字串姐突然大喊一声:**转型数字!**後,眼前的人竟然变成数字姐了?! 旁白:剧情先在这暂...