要如何在 React 中撰寫 CSS,為元素添加樣式?目前的方法有 Inline-Style、CSS Modules...,其中一個方法就是很多人使用的 Styled-components。Styled-components 是一個 CSS-in-JS 函式庫,讓我們可以在 JS 中撰寫 CSS,直接針對 React Component 去進行樣式設定,並且同時解決了 CSS 常遇到的命名衝突的問題。
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>
);
當我們建立的是一個普通的 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>
);
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 中定義元素的樣式。
如果文章中有錯誤的地方,要麻煩各位大大不吝賜教;喜歡的話,也要記得幫我按讚訂閱喔❤️