反应将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> 
     ); 
    } 
} 

注意：第二种方式是一种更好的方式，因为它可以帮助您维护代码，它使代码更加干净，紧凑，更具可读性并易于维护。