Question

我创建了一个反应组件。在这种情况下，它是一个名为Header.js的组件。

以下是代码：

import React from "react";

export class Header extends React.Component {

    render() {

        return (

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

        );

    }

}

我现在需要做的是在js中添加一些css到同一个组件文件。

我需要在不使用像jss等的插件库的情况下这样做。

我该怎么做？

Answer 1

您可以通过以下方式申请css：

1。直接使用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：

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

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

在没有插件库的情况下，将Css添加到组件

1 个答案: