反應將CSS添加到沒有插件庫的組件

Question

我創建了一個反應組件。在這種情況下，它是一個名爲Header.js的組件。

下面是代碼：

import React from "react"; 

export class Header extends React.Component { 

    render() { 

     return (

      <div> 
       <h1>Header Component</h1> 
      </div> 

     ); 

    } 

} 

我現在需要做的是一些CSS添加到相同的組件文件，使JS裏面。

我需要做到這一點，而無需使用插件庫，例如JSS等

我怎樣才能做到這一點？

Answer 1

您可以通過以下方式申請css：

直接與HTML元素：

import React from "react"; 
export class Header extends React.Component { 
    render() { 
     return (
      <div style={{fontSize: '10px'}}> 
       <h1>Header Component</h1> 
      </div> 
     ); 
    } 
} 

2.您可以在該文件的起始定義css object然後使用這些object in style屬性：

let style = { 
    a: {fontSize: '10px'} 
}; 

import React from "react"; 
export class Header extends React.Component { 
    render() { 
     return (<div style={style.a}> 
       <h1>Header Component</h1> 
      </div> 
     ); 
    } 
} 

注意：第二種方式是一種更好的方式，因爲它可以幫助您維護代碼，它使代碼更加乾淨，緊湊，更具可讀性並易於維護。