iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
0
Modern Web

React + GraphQL 全端練習筆記系列 第 5

仿Trello - 添加 Stylesheets

本系列文以製作專案為主軸,紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分,有覺得不明確的地方還請留言多多指教。

在實際製作Components以前先來添加基礎的Stylesheets,讓畫面看起來漂亮些。

Bootstrap

首先加裝bootstrap套件

npm install bootstrap

接著在App.js或是index.js裡加上

import 'bootstrap/dist/css/bootstrap.css';

就能運用bootstrap的class替dom加造型。

像這樣:

<button className="btn btn-primary">bootstrap</button>

但這樣加的只有造型,並沒有將bootstrap的jquery方法也加進來。
可以像往常一樣到index.html上加入scripts,不過在 React 推薦的做法是利用套件像是 React Bootstrap ,他用React component的作法重製了bootstrap的功能,這部分連同 React component 一起,容後再談,先繼續談談style的部分。

Bootswatch

如果除了原生bootstrap想要更多風格選擇,可以用Bootswatch上的風格替換掉,首先加裝bootstrap套件:

npm install bootswatch

然後在App.js或是index.js裡替換掉bootstrap.css的部分

import "bootswatch/dist/[theme]/bootstrap.min.css"; 

[theme]的部分替換成想要的風格,像是

import "bootswatch/dist/cyborg/bootstrap.min.css";

Sass/Scss

如果要自己修改部分css,建立css檔並import進目標的component就行,
像是CRA範例裡的

// App.js
import "./App.css";

不過因為之前還沒用過Sass/Scss,這次一併加進來一起學習。

一樣先上套件:

npm install node-sass

接著就能建立 .scss檔案並導入,導入的方式跟 .css一樣:

// App.js
import "./App.scss";

題外話 : css classes 與 inline style

以上提到的方法都是建立css classes並在外部的css/scss檔案制定各class的style,
主要流程如下:

  1. 在component上制定className
function App() {
  return (
    <div className="App">
        ...
    </div>
  );
}
  1. 在外部css/scss檔制定class的style
.App {
  text-align: center;
}

不過也能用inline style的方式修改

function App() {
  return (
    <div style={{textAlign: "center"}}>
        ...
    </div>
  );
}

一般會將style另外提出成一個物件

function App() {

  const styles = { textAlign: "center", color: "red" };

  return (
    <div style={styles}>
        ...
    </div>
  );
}

兩種方法的比較上css classes比較簡潔,更好管理,效能也比較好,不過inline styles可以利用變數去動態更新style,在某些情況下用inline styles會比抽換 class來的方便。

簡單範例:

function App() {
  const newWidth = 100;
  const styles = { width: `${newWidth}px` };

  return (
    <div style={styles}>
        ...
    </div>
  );
}

當要改變物件的寬度的時候只要更新newWidth就好。

References:


上一篇
仿Trello - 建立React專案
下一篇
仿Trello - 使用React Bootstrap
系列文
React + GraphQL 全端練習筆記30

尚未有邦友留言

立即登入留言