相關文章閱讀:
emotion，整體非常多功能，不輸常見的 styled 這個套件，
如果純用 emotion core 不僅容量小，使用率也高於 styled喔! 方法 :
安裝方法 : 全域安裝 / 開啟專案資料夾安裝
npm i @emotion/css使用方法:
使用emotion/core最基本的就是要把 react轉成 JSX 讓套件幫你生成CSS style
/** @jsx jsx 此行註解必加，因為這是告訴Babel編譯的時候要改成 JSX來編譯 */
import {jsx, css} from "@emotion/core"; 匯入 emotion core全域CSS style
把 Globa套件可以全域通用，例如body , div 等原生 elements通用CSS 樣式，或ClassName 也可在這邊定義，全都能用。
/** @jsx jsx */
import { jsx, Global } from "@emotion/core";
export default function GlobalCSS() {
return (
<Global
styles={{
body: {
margin: 0,
color: "white",
backgroundColor: "rgb(200,200,200)"
},
'.some-class': {
fontSize: 50,
textAlign: 'center'
}
}}
/>
);
}
/** @jsx jsx */
import { jsx } from "@emotion/core";
import GlobalCSS from "./views/components/GlobalCSS";
const App = () => {
return (
<div>
<GlobalCSS />
</div>
);
};
export default App;
Object Style
此方法跟 react 內建的幾乎一致，把style 換成CSS 並且用 JSX編譯
/** @jsx jsx */
import {jsx} from '@emotion/react'
render(
<div css={{ //這邊的 CSS = react 原生 style
color: 'darkorchid',
backgroundColor: 'lightgray'
}}
>
This is darkorchid.
</div>
)CSS style
這個方法，可以直接使用CSS的編譯方式，並且用 text “方式編譯，所以要增加變數，就要使用 ${variable} 才行 ，好處是可以拿原生CSS直接貼上，打CSS方式也比較順手。
/** @jsx jsx */
import {css, jsx} from '@emotion/react'
const color = 'pink'
render(
<div
css={css`
background-color: ${'yellow'};
`}
>
This is a yellow background.
</div>
)CSS : media query
這在原生 React inline也是沒辦法做到，但用JS還是可以做到類似的功能，
但沒這麼方便使用就是了，這邊也提供 css“版本跟 object style的版本
/** @jsx jsx */
import { jsx } from '@emotion/react'
render(
<div
css={{
color: 'red',
'@media(min-width: 420px)': {
color: 'orange'
}
}}
>
This is orange on a big screen and red on a small
screen.
</div>
)
render(
<p
css={css`
font-size: 30px;
@media (min-width: 420px) {
font-size: 50px;
}
`}
>
Some text!
</p>
)CSS : pseudo-classes 偽類
在React inline CSS 是沒辦法做到的
而正常的CSS 是 div:hover { color : black } ，
在emotion裡面，一律都是 &+ 贅詞 &:hover這樣 範例如下
/** @jsx jsx */
import { jsx } from '@emotion/react'
render(
<div
css={{ //for object用法
backgroundColor: 'hotpink',
'&:hover': {
color: 'lightgreen'
}
}}
>
TEST
</div>
)
const color = 'pink'
render(
<div //For CSS用法
css={css`
background-color: ${'yellow'};
&:hover {
color: ${color};
}
`}
>
This has a hotpink background.
</div>
)CSS : pseudo-elements 偽元素
在React inline CSS 是沒辦法做到的
而正常的CSS 是 .someclasName::before { content : “我在元素前面” } ，
在emotion裡面，一律都是 &+ 贅詞 &::before這樣 範例如下
這邊object style下 content的內容一定要用 “夾起來才行。
/** @jsx jsx */
import { jsx } from '@emotion/react'
render(
<div
css={{ //for object用法
backgroundColor: 'hotpink',
'&::before' {
content: `"Before pseudo-elements "`,
}
}}
>
TEST
</div>
)
render(
<div //For CSS用法
css={css`
background-color: ${'yellow'};
&::before {
content: "Before pseudo-elements ";
}
`}
>
This has a hotpink background.
</div>
)組合用法
將兩塊 CSS 或 style或混合起來的，組成一個 CSS 樣式，非常好用
/** @jsx jsx */
import {css, jsx} from '@emotion/react'
const danger = css`
color: red;
`
const base = css`
background-color: darkgreen;
color: turquoise;
`
render(
<div>
<div css={base}>This will be turquoise</div>
<div css={[danger, base]}>
This will be also be turquoise since the base styles
overwrite the danger styles.
</div>
<div css={[base, danger,
{
'&:hover': {
color: 'lightgreen'
}
}]}>This will be red</div>
</div>
)官方說明:
@copyright MRcodingRoom
觀看更多文章請點MRcoding筆記
觀看更多文章請點MRcoding筆記
