React Hinzufügen Css zu Komponente ohne Addon-Bibliothek

Question

Ich habe eine Reaktionskomponente erstellt. In diesem Fall ist es eine Komponente namens Header.js. Hier

ist der Code:

import React from "react"; 

export class Header extends React.Component { 

    render() { 

     return (

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

     ); 

    } 

} 

Was ich jetzt tun muß, ist, einige CSS auf die gleiche Komponentendatei hinzufügen, damit in dem js.

Ich muss dies tun, ohne Bibliotheken Addon mit wie jss usw.

Wie kann ich das tun?

Answer 1

Sie css durch folgende Weise anwenden können:

1. Direkt mit HTML Element:

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

2. Sie können die css object in dem Starten der Datei definieren dann diejenigen verwenden object im Stil Attribut:

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> 
     ); 
    } 
} 

Hinweis: Der zweite Weg ist ein besserer Weg, weil es Ihnen hilft, den Code zu pflegen, macht es Code sauber, kompakt, lesbarer und leicht zu pflegen.