iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

寫出好維護又簡潔的 react 程式碼 feat: Function Programming系列 第 8

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;
}


上一篇
day7: CSS style 規劃 - CSS in JS(emotion 使用 - 1)
下一篇
day9: CSS style 規劃 - CSS in JS(emotion 使用 - 3)
系列文
寫出好維護又簡潔的 react 程式碼 feat: Function Programming30

1 則留言

0

大大您好,想請問 CSS in JS 該怎麼減少重複的 CSS 呢,例如很多地方都會用到這一組 padding: 12px; margin: 12px; 該怎麼做到原本 class 能做到的擴充/組合呢?

我要留言

立即登入留言