React+TypeScript中使用Emotion

什麼是Emotion？

一個css in js架構

Emotion 是一個專為使用 JavaScript 編寫 css

樣式而設計的庫。除了通過源映射、标簽和測試實用程式等功能提供出色的開發人員體驗之外，它還提供強大且可預測的樣式組合。支援字元串和對象樣式。

安裝

yarn add @emotion/react
           

yarn add @emotion/react @emotion/styled
           

行内樣式

/* @jsxImportSource @emotion/react */
import React from 'react';
import { jsx, css} from '@emotion/react';

function App() {
  return (
    <div className="App">
      <h1 css={css`
        color:red;
      `}>
        測試
      </h1>
    </div>
  );
}

export default App;
           

這裡必須要使用

而不是官網的

具體原因可以檢視這個大佬的文章@emotion在React17的适配問題（@jsxImportSource/@jsxRuntime的作用）我沒必要搬過來了。

增加樣式元件

/* @jsxImportSource @emotion/react */
import React from 'react';
import { jsx, css} from '@emotion/react';
import styled from '@emotion/styled';

const AppWrapper = styled.div`
  width:100px;
  height:100px;
  background:red;
`

function App() {
  return (
    <div className="App">
      <AppWrapper>123</AppWrapper>
    </div>
  );
}

export default App;
           

props傳參

/* @jsxImportSource @emotion/react */
import React,{FC } from 'react';
import styled from '@emotion/styled';

interface StyledComponentProps {
  bgColor: string
}

interface ComponentProps {
  className?: string
  label: string
}

const Component: FC<ComponentProps> = ({
  label,
  className
}) => <div className={className}>{label}</div>

const StyledComponent0 = styled(Component)<StyledComponentProps>`
  color: red;
  background: ${props => props.label ? props.bgColor : 'white'};
`

function App() {
  return (
    <div className="App">
    <StyledComponent0
      bgColor="blue"
      label="測試"
    />
    </div>
  );
}

export default App;

           

多個樣式類單獨生成

/* @jsxImportSource @emotion/react */
import React,{FC } from 'react';
import {cx, css} from '@emotion/css'

const styleTextColor = css`
  color:red;
`

const styleFontSize = css`
  font-size:15px;
`

function App() {
  return (
    <div className="App">
      <div className={`${cx(styleTextColor)} ${cx(styleFontSize)}`}>測試</div>
    </div>
  );
}

export default App;
           

多個樣式合并到一個樣式類

/* @jsxImportSource @emotion/react */
import React,{FC } from 'react';
import {css} from '@emotion/react'

const styleTextColor = css`
  color:red;
`

const styleFontSize = css`
  font-size:15px;
`

function App() {
  return (
    <div className="App">
      <div css={[styleTextColor,styleFontSize]}>測試</div>
    </div>
  );
}

export default App;
           

總結

‘@emotion/css’ 利用cx傳回生成的類名字元串

‘@emotion/react’ 中css傳回對象

CX組合時後面的樣式覆寫之前的樣式