React中如何定義css樣式

1. 內部樣式

  <style>
        .alert-text{
            font-size: 20px;
        }
    </style>

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

<h1 style={styleObj} className="alert-text">Hello {this.props.name} {this.props.title}</h1>;

• 1

• 1

這邊注意在命名class名時，使用className而不是class.

2.內聯樣式

{/*style={{color:'red'}}*/}

• 1

• 1

需要兩個大括號表示鍵值對，值是字串的話需要用引號。（一個大括號表示書寫表示式）

 var styleObj = {
            color:"blue",
            fontSize:40,
            fontWeight:"normal"
        } 

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

在jsx中定義樣式物件。

style={styleObj}

• 1

• 1

表示式的形式來引用css樣式。