20190224

[iamsiutw]

日期: 2019/2/24 SUN

目標: 9/30

關於程式

前天提到可以使用 CSS Module 來設計 style，CSS Module 會在作用區域內自動生成獨特單一的 classname，這麼做的好處是開發者可以在不同 component 重複命名相同的classname，不必擔心會彼此汙染影響。

今天寫個簡單的範例。

首先建立兩個.css檔

Button.module.css

.error {
  background-color: red;
}

another-stylesheet.css

.error {
  color: red;
}

接著建立一個名為 Button.js 的 Component，並同時 import 兩個css檔

Button.js

import React, { Component } from 'react';
import styles from './Button.module.css'; // import module 以 styles 名稱使用
import './another-stylesheet.css'; // 一般情況的 import

class Button extends Component {
  render() {
    // js 物件參考
    return <button className={styles.error}>Error Button</button>;
  }
}

Element result

<!-- 紅色 background 但不是紅色 text -->
<button class="Button_error_ax7yz">Error Button</button>

參考資料： Adding a CSS Modules Stylesheet

隨筆

假日只有一天，沒有放到假的感覺特別重，白天玩個《巫師 3》；晚上看 Freddy 玩《還願》；睡前寫點程式，一天也就這麼過了，有時候廢人模式也是必須的。