[ Day 24 ] React 中的样式设定

今天要介绍的内容是如何在 React.js 中撰写我们的 CSS 样式？除了相关套件的应用之外，还有哪些方法可以实作呢？

在 React 中撰写样式的方法

下面整理了 3 个撰写方式，大家可以视专案大小或开发需求来做选择：

1. Inline Styling 行内样式

在 Component 中的 JSX 加上 style 属性来撰写样式。

这边其实就像我们写 HTML 的时候直接使用 style 属性将样式写在 HTML 的标签中的概念。不过要特别注意的是因为在 React Component 中采用的是 JSX 的撰写方式，所以 style 属性一定要赋予一个 JavaScript 的物件，因此会像是下方范例那样使用两个 {} ，最外层的括号是 JSX 所使用的，而内层的括号是指这个 style 物件本身。

class MyHeader extends React.Component {
  render() {
    return (
      <div>
          /* 赋予 h1 标签内的 style 属性一个 {color: "red"} 物件*/
          <h1 style={{color: "red"}}>Hello Style!</h1>
          <p>Add a little style!</p>
      </div>
    );
  }
}

若不能理解上面的两个括号的使用，其实你可以这样拆解：

class MyHeader extends React.Component {
  render() {
    const mystyle = {
      color: "red"
    };
    return (
      <div>
          <h1 style={mystyle}>Hello Style!</h1>
          <p>Add a little style!</p>
      </div>
    );
  }
}

要注意的细节

另外，在 JSX 中撰写 JavsScript 物件的时候，所有的样式属性都要改成驼峰式命名（ camelCased），若属性中间有 - 的话，也都必须改成驼峰式命名法。我们直接看下方的范例：

这边的 background-color 属性就改写成 backgroundColor 了。

2. CSS Stylesheet 样式表

在档案中直接汇入 CSS 的样式表。

这边一样是用以往开发常用的方式将样式表 CSS Stylesheet 跟架构分别处理，这样就能在各自的档案中分别处理画面和 JSX。一样直接给大家看范例：

import React from 'react';
import ReactDOM from 'react-dom';
/* 这边汇入 CSS 档案： App.css */
import './App.css';

class MyHeader extends React.Component {
  render() {
        return (
          <div>
              <h1>Hello Style!</h1>
              <p>Add a little style!.</p>
          </div>
        );
    }
}

ReactDOM.render(<MyHeader />, document.getElementById('root'));

3. CSS Modules 模组化

将 CSS 档案中的样式组成物件的模组，并在 Component 中使用指定的物件做样式设定。

这样讲可能听起来有点复杂，其实就是我们将原本的 CSS 档案改成 自定义名称.module.css 的档案，并在 JSX 中选择我们要使用该档案中的哪一个 CSS class。附上下面的范例大家应该会比较理解 CSS Modules 的概念：

/* 首先建立一个档案名为 mystyle.module.css 的档案，里面撰写一个 .bigblue 的样式*/
.bigblue {
  color: DodgerBlue;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

import React from 'react';
import ReactDOM from 'react-dom';
/* 汇入上面所建立的 mystyle.module.css 档案*/
import styles from './mystyle.module.css'; 

class Car extends React.Component {
  render() {
    /* 在要使用的标签内使用该 module 内部的 class */
    return <h1 className={styles.bigblue}>Hello Car!</h1>;
  }
}

export default Car;

这边介绍了 3 种样式的写法，不过其实还有一个是在写 React 样式中很常使用且前辈们推荐的一个套件： style-component ，不过因为这次的网站实作中并不会使用到，因此就略过这个部分的介绍了。若对该套件有兴趣的话，前辈大大们的文章整理在下方：

• PH - Styled Component
• 莫力全 Kyle Mo - 【Day 12】Styled-component
• Lieutenant - [Day 11] React CSS 最重要的小事（下）

明天开始我们就要将前面几天所学到的 React.js 基础应用在网站当中了！透过前面的基础学习再搭配实作相信会更清楚开发时该如何使用和应用它们。

有任何问题的话还是一样都非常非常欢迎提出和指教～
那我们下篇见ʘ‿ʘ

参考资料：

• Styling React Using CSS
• [第二十一周] React 基础：如何写 CSS