學習React(17) - 樣式和基本的CSS (Styling and CSS basics)

在React中，有幾種形式可以表示CSS在React中.

1. CSS stylesheets
2. Inline styling
3. CSS Modules
4. CSS in JS Libraries (Styled Components)

---

現在先介紹 stylesheets
在src文件夾下創建兩個文件，一個叫Stylesheet.js 文件，另一個叫做myStyle.css文件。
先是Stylesheet.js文件代碼：

//Stylesheet.js
import React from 'react'
// 調用css文件
import './myStyles.css'

function Stylesheet() {
    return (
        <div>
            <h1 className='primary'>Stylesheet</h1>
        </div>
    )
}

export default Stylesheet

大家或許看到了在Stylesheet.js文件裏，在className那裏有一個css class，在myStyle.css文件下，怎麼寫呢：

// myStyle.css
.primary{
    color: orange;
}

在App.js文件下：

// App.js 文件
import React from 'react';
import './App.css';
import Stylesheet from './Stylesheet';

function App() {
  return (
    <div className="App">
      <Stylesheet/>
    </div>
  );
}

export default App;

那麼結果如何呢？

或許有人會想了，還有沒有其他種方法來做css 呢，而且還是使用stylesheet的方法呢？答案肯定是有的。
在App.js 文件裏，添加一個屬性：

// App.js 文件
import React from 'react';
import './App.css';
import Stylesheet from './Stylesheet';

function App() {
  return (
    <div className="App">
      // 裏面的屬性值可以換成false的
      <Stylesheet primary={true}/>
    </div>
  );
}

export default App;

在Stylesheet.js 文件裏:

// Stylesheet.js 文件
// 使用了props的技巧
import React from 'react'
import './myStyles.css'

function Stylesheet(props) {
    let className = props.primary ? 'primary' : ''
    return (
        <div>
            <h1 className={className}>Stylesheet</h1>
        </div>
    )
}

export default Stylesheet

結果如下：(這是primary={true})

這是 primary={false}的結果:

或許有人會問，在css文件裏想弄多個css樣式，應該怎麼做呢？
在myStyle.css文件中：

// myStyle.css
.primary{
    color: orange;
}

.font-xl{
    font-size: 72px;
}

在Stylesheet.js 文件中：

// Stylesheet.js 文件
import React from 'react'
import './myStyles.css'

function Stylesheet(props) {
    let className = props.primary ? 'primary' : ''
    return (
        <div>
            // 不是使用單引號，是按esc左下面的按鈕
            <h1 className={`${className} font-xl`}>Stylesheet</h1>
        </div>
    )
}

export default Stylesheet

結果如何：

---

還可以這麼做，博主覺得下面的方法更容易理解。

// Stylesheet.js 文件
import React from 'react'
import './myStyles.css'

function Stylesheet(props) {
    return (
        <div>
            <h1 className='primary font-xl'>Stylesheet</h1>
        </div>
    )
}

export default Stylesheet

myStyles.css文件還是保持一樣的。

// myStyle.css
.primary{
    color: orange;
}

.font-xl{
    font-size: 72px;
}

在App.js文件中：

// App.js 文件
import React from 'react';
import './App.css';
import Stylesheet from './Stylesheet';

function App() {
  return (
    <div className="App">
      <Stylesheet/>
    </div>
  );
}

export default App;

結果還是一樣：

---

下面是介紹Inline Styling方法
在src文件夾下面創建一個文件，名叫Inline.js文件

// Inline.js
import React from 'react'

const heading = {
    fontSize: '72px',
    color: 'blue'
}

function Inline() {
    return (
        <div>
            <h1 style={heading}>Inline</h1>
        </div>
    )
}

export default Inline

在App.js文件中，

// App.js 文件
import React from 'react';
import './App.css';
import Inline from './Inline';

function App() {
  return (
    <div className="App">
      <Inline/>
    </div>
  );
}

export default App;

結果如下：

博主覺得這個方法能直接能在同一個文件下找到所對應的css屬性，但是覺得一旦做到大項目的時候，文件就非常多，這時候就得分檔來進行。

---

下面來說一下CSS Modules。
得創建一個名爲appStyles.module.css文件：

// appStyles.module.css 文件
.success{
    color: green
}

還有一個名爲appStyles.css文件：

.error{
    color: red
}

在App.js文件中：

// App.js 文件

import React from 'react';
import './App.css';

import './appStyles.css'
import styles from './appStyles.module.css'

function App() {
  return (
    <div className="App">
      <h1 className="error">Error</h1>
      <h1 className={styles.success}>Success</h1>
    </div>
  );
}

export default App;

結果如下：

---

如果覺得不錯的話，就麻煩用點贊來代替五星好評吧！