day_009.md

day 9

Emotion 样式

CSS-in-JS 库

官方英文文档

github 文档

---

install in React

yarn add @emotion/react
or
npm install --save @emotion/react

安装styled

styled is a way to create React components that have styles attached to them.

yarn add @emotion/styled
or
npm install --save @emotion/styled

use

return (
    <Container>
        <ShadowCard>
            {"...各种组件"}
        < /ShadowCard>
    < /Container>
)

const ShadowCard = styled(Card)`
  width: 40rem;
  min-height: 56rem;
  padding: 3.2rem 4rem;
  border-radius: 0.3rem;
  box-sizing: border-box;
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px;
  text-align: center;
`;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
`;

App.css 全局样式

html {
  /* rem em */
  /*em 相对于父元素的font-size*/
  /*rem 相对于根元素html的font-size, r就是root的意思*/
  /*16 * 62.5% = 10px*/
  /*1rem === 10px*/
  font-size: 62.5%;
}

/*viewport height === vh*/
html body #root .App {
  min-height: 100vh;
}