Emotion 10 发布：支持更灵活的样式和全局样式以及服务器端渲染

/** @jsx jsx */import { jsx } from '@emotion/core'

/** @jsx jsx */import { jsx } from '@emotion/core'

const P = props => (  <p    css={{      margin: 0,      fontSize: 12,      lineHeight: '1.5',      fontFamily: 'sans-serif',      color: 'black'    }}    {...props} // <- props contains the `className` prop  />)

const ArticleText = props => (  <P    css={{      fontSize: 14,      fontFamily: 'Georgia, serif',      color: 'darkgray'    }}    {...props} // <- props contains the `className` prop  />)

const SmallArticleText = props => (  <ArticleText    css={{      fontSize: 10    }}    {...props} // <- props contains the `className` prop  />

.css-result{+ margin: 0;- font-size: 12px;+ line-height: 1.5;- font-family: 'sans-serif';- color: black;- font-size: 14px,+ font-family: Georgia, serif,+ color: darkgray;+ font-size: 10px;}

/** @jsx jsx */import { jsx } from "@emotion/core";import { ThemeProvider } from "emotion-theming";import { render } from "react-dom";

function Header(props) {  return (    <h1      css={theme => ({        fontSize: 48,        fontWeight: 600,        color: theme.colors.header      })}      {...props}    />  );}

function BodyText(props) {  return (    <p      css={theme => ({        color: theme.colors.primary,        fontFamily: "sans-serif",        fontSize: 18,        "&:hover": {          color: theme.colors.hover        }      })}      {...props}    />  );}

function App() {  return (    <ThemeProvider      theme={{        colors: {          primary: "hotpink",          hover: "crimson",          header: "dimgray"        }      }}    >      <div>        <Header>Header Title</Header>        <BodyText>Hello Emotion 10!!!</BodyText>      </div>    </ThemeProvider>  );}

render(<App />, document.getElementById("root"

import { Global, css } from '@emotion/core'

render(  <div>    <Global      styles={css`        * {          color: hotpink !important;        }      `}    />    <Global      styles={{        '.some-class': {          fontSize: 50,          textAlign: 'center'        }      }}    />    <div className="some-class">      Everything is hotpink now!    </div>  </div>)