css-in-js emotion

学习到的两个示例

从写法上看, 侵入性比较小, 直接就是 className:

import styled, { css } from 'react-emotion';

const Container = styled('div')`
  background: #333;
`
const myStyle = css`
  color: rebeccapurple;
`
const app = () => (
<Container>
  <p className={myStyle}>Hello World</p>
</Container>
);


import styled from '@emotion/styled'

let SomeComp = styled.div({
  color: 'hotpink'
})

let AnotherComp = styled.div`
  color: ${props => props.color};
`

render(
  <SomeComp>
    <AnotherComp color="green" />
  </SomeComp>
)