day8: CSS style 规划 - CSS in JS(emotion 使用 - 2)

使用 react 作法

npm i @emotion/react

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

const color = 'white'

render(
  <div
    css={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >
   Demo
  </div>
)

使用这种方式的 css, 最终 css``` 不会产生一个新的 className, 会直接对 element 做 style 的附加，如果css ``` 经由父传子,且有相同的 css 属性,则後者会盖掉前者。

import { jsx } from '@emotion/react'

const Child = props => (
  <p
    css={css`
      margin: 0,
      fontSize: 12,
      lineHeight: 1.5,
      fontFamily: 'Sans-Serif',
      color: black`
    }
  />
)

const Parent = props => (
  <Child
    css={
     css`
		  fontSize: 14,
		  fontFamily: 'Georgia, serif',
		  color: darkgray
		 `
   }
  />
)

import { jsx } from '@emotion/react'

const Child = props => (
  <p
    css={css`
      margin: 0;
      fontSize: 12;
      lineHeight: 1.5;
      fontFamily: 'Sans-Serif';
      color: black;`
    }
  />
)

const Parent = props => (
  <Child
    css={
     css`
		 fontSize: 14;
		 fontFamily: 'Georgia, serif';
		 color: darkgray;
	   `
   }
  />
)

// 最後 Child 剩下的 style 

{
  *fontSize: 14;* //被删除
  *fontFamily: 'Georgia, serif';* //被删除
  *color: darkgray;* //被删除
  margin: 0;
  fontSize: 12;
  lineHeight: 1.5;
  fontFamily: 'Sans-Serif';
  color: black;
}