iT邦幫忙

2021 iThome 鐵人賽

DAY 24
0
Modern Web

Follow me! 來一場前端技能樹之旅系列 第 24

[Day 24 - Modern CSS] 在JS中寫CSS,神套件Styled-components

  • 分享至 

  • xImage
  •  

要如何在 React 中撰寫 CSS,為元素添加樣式?目前的方法有 Inline-Style、CSS Modules...,其中一個方法就是很多人使用的 Styled-components。Styled-components 是一個 CSS-in-JS 函式庫,讓我們可以在 JS 中撰寫 CSS,直接針對 React Component 去進行樣式設定,並且同時解決了 CSS 常遇到的命名衝突的問題。

Styling a component

Styled-components 利用了 Javascript 的樣板字面值(Template literals)來設置組建的樣式,允許在字串中嵌入運算式,字串用反引號 `` 取代單雙引號包住;運算式則由 $ 字元和 {} 包裹組成,舉例如下:

`string ${expression} string`

設定樣式的同時,Styled-components 會直接建立一個 React Component,包含所指定的 Element。比如下面我們針對 <h2> 元素設定樣式,同時建立成一個 Component <Title>

import styled from "styled-components";

const Title = styled.h2`
  font-size: 20px;
  color: red;
`;
render(
  <div>
    <Title>標題文字</Title>
  </div>
);

根據Props改變樣式

當我們建立的是一個普通的 React Component,就代表可以在組件間傳遞 Props,配上樣板字面值的功能,針對組件的樣式進行調整就變得很方便。舉例如下,若 <Title> 有設置 Prop red 就顯示紅色的文字,沒有就顯示黑色的文字:

const Title = styled.h2`
  font-size: 20px;
  color: ${props => props.red ? "red" : "black"};
`;
render(
  <div>
    <Title red>標題文字</Title>
    <Title>標題文字</Title>
  </div>
);

擴展樣式

在 React 中,會常常使用同一個 Component 來建立相同的 UI,而我們可能希望針對各別組件去稍微修改它的樣式, Styled-components就提供了一個方法,只需要將基礎組件包在 styled() 內,就能夠繼承組件樣式再擴展出一個新的組件。比如前一個範例,可以用下面的程式碼做到相同的效果:

const Title = styled.h2`
  font-size: 20px;
  color: black;
`;
const RedTitle = styled(Title)`
  color: red;
`;
render(
  <div>
    <RedTitle>標題文字</RedTitle>
    <Title>標題文字</Title>
  </div>
);

或者我們想要改變的是 Component 的標籤或繼承組件,可以利用 Prop as指定,比如將第二個標題從 <h2> 改成 <p> 元素:

render(
  <div>
    <RedTitle>標題文字</RedTitle>
    <Title as="p">標題文字</Title>
  </div>
);

巢狀(Nesting)語法

Styled-components 還支持使用 SCSS 語法,可以在巢狀結構內設定子組件的樣式,或是使用 & 字元添加 CSS 偽類。比如下面的程式碼,為 Title Component 加上 hover 樣式、以及針對內部的 span 子元素添加樣式:

const Title = styled.h2`
  font-size: 20px;
  color: black;

  &:hover {
    color: blue; // <Title> when hovered
  }

  span {
    color: green; // style <span> in <Title>
  }
`;
return (
  <div>
    <RedTitle>標題文字</RedTitle>
    <Title>
      標題<span>文字</span>
    </Title>
  </div>
);


小結

簡單的入門了 Styled-components,學會了一些基本的使用,現在我們就可以在 React 中定義元素的樣式。

如果文章中有錯誤的地方,要麻煩各位大大不吝賜教;喜歡的話,也要記得幫我按讚訂閱喔❤️

參考資料


上一篇
[Day 23 - Redux] React + Redux = React-redux
下一篇
[Day 25 - Modern CSS] 指定CSS作用域,模組化開發 CSS Modules
系列文
Follow me! 來一場前端技能樹之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言