CSS in JS

Emotion (opens new window)

内联样式

/** @jsx jsx */
import { jsx, css } from '@emotion/react'

const base = css`
  color: hotpink;
`

render(
  <div
    css={css`
      ${base};
      background-color: #eee;
    `}
  >
    This is hotpink.
  </div>
)

绑定样式的组件 (opens new window)

import styled from '@emotion/styled'
const ParentComp = () => (<div>xxx</div>)
const Comp = () => (<div>xxx</div>)

const Title = styled.div`
  color: #f00;
  background: #fff;
  &:hover {background: #eee;}
`

const Input = styled.input(props => {
  retrun {
    display: props.isShow ? '' : 'none'
  }
})
const StyledParentComp = styled(ParentComp)`
  &:hover ${Comp} {
    color: #f00;
  }
`

const StyledComp = styled(Comp)`
  color: #f00;
`

render(
  <>
    <Title>xxxx</Title>
  </>
)

Media Queries

/** @jsx jsx */
import { jsx, css } from '@emotion/react'
<p
  css={css`
      font-size: 30px;
      @media (min-width: 420px) {
        font-size: 50px;
      }
    `}
  >
    Some text!
</p>

全局样式

import { Global, css } from '@emotion/react'
<Global
    styles={css`
      .some-class {
        color: hotpink !important;
      }
    `}
/>
<div className="some-class">This is hotpink now!</div>

其他

• KeyFrames (opens new window)
• 包含的包的介绍(Package Summaries) (opens new window)

工具

• vscode-styled-components (opens new window): VSCode 插件，支持样式高亮和自动补全。

— 完 —

整理By Joel (opens new window)。微信号搜索: joel007。