[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.

Search

    Table of Contents