1010Code

[React學習筆記] 兩種套用CSS方法

2018/01/04 React

兩種套用CSS方法

React 有兩種方法將 CSS 套用，一種是外部新增一個 CSS 檔再引入，另一個作法是在標籤內撰寫 inline sttyle，下列範例我將子元件 Person.js 使用外部 CSS 引入方式而 App.js 內的 <button> 按鈕則使用 inline sttyle 方法實作。

  1. 方法一外部引入 .css 檔
  2. 標籤內撰寫 inline sttyle
  • 主元件 App.js
import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person';

class App extends Component {

  render() {
    const style = {
      backgroundColor: 'white',
      font: 'inherit',
      border: '1px solid blue',
      padding: '8px',
      cursor: 'pointer'
    };
    return (
      <div>
        <button style={style}>Click Name</button>
        <Person name="Max" age="28" />
        <Person name="Andy" age="21" />
      </div>
    );
  }
}

export default App;
  • 子元件 Person.js
import React from 'react';
import './Person.css'

const person = (props) => {
  return (
      <div className="Person">
        <p onClick={props.click}> I'm {props.name} and I'am {props.age} yesrs old.</p>
        <p>{props.children}</p>
        <input type="text" onChange={props.changed} value={props.name}/>
      </div>
  )
};
export default person;

See the Pen React CSS style by Yi Lin Tsai (@andy6804tw) on CodePen.

鼓勵持續創作，支持化讚為賞！透過下方的 Like 拍手👏，讓創作者獲得額外收入~
版主10在2020年首次開設YouTube頻道，嘗試拍攝程式教學。想要了解更多的朋友歡迎關注我的頻道，您的訂閱就是最大的支持～如果想學其他什麼內容也歡迎許願XD
https://www.youtube.com/channel/UCSNPCGvMYEV-yIXAVt3FA5A

Search

    Table of Contents