为什么在ReactJS中一个组件的css文件与另一个组件的css文件交互？如何处理？

Question

我试图用Reactjs做一个网站模板。在大屏幕部分，我做订阅表单，在主页部分用户输入表单。但是一个组件的css与另一个组件的css相互作用。我怎么处理？[1]：https://i.stack.imgur.com/Wd4OQ.png

用户EntryJs:-

import React, { Component } from 'react'

导入“./User Entry.css”

类窗体扩展组件{initialState={name:，age:，job:}state=this.initialState

changeHandler = event => {
    const { name, value } = event.target
    this.setState({
        [name]: value
    })
}

render() {
    const { name, job, age } = this.state
    return (

        <form className="form-inline">
            <div className="row">
                <div className="col-md-3">
                    <div className="form-group">
                        <label htmlFor="name">Name:-</label>
                        <input type="text"
                            className="form-control"
                            name="name"
                            id="name"
                            value={name}
                            autoFocus
                            onChange={this.changeHandler} />
                    </div>
                </div>
                <div className="col-md-3">
                    <div className="form-group">
                        <label htmlFor="age">Age:-</label>
                        <input type="text"
                            className="form-control"
                            name="age"
                            id="age"
                            value={age}
                            autoFocus
                            onChange={this.changeHandler} />
                    </div>
                </div>
                <div className="col-md-3">
                    <div className="form-group">
                        <label htmlFor="job">Job:-</label>
                        <input type="text"
                            className="form-control"
                            name="job"
                            id="job"
                            value={job}
                            autoFocus
                            onChange={this.changeHandler} />
                    </div>
                </div>
                <div className="col-md-3"></div>
            </div>
        </form>

    )
}

}

导出默认表单

标题JS：-

import React, { Component } from 'react'

导入'./Header.css从react-router-dom导入{Link， with路由器}；

类头扩展了组件{constructor（props）{super（props）

    this.state = {
        email: ""
    }
}

submitHandler = event => {
    event.preventDefault();
    alert(`Subscribed Email is : ${this.state.email}`);
}

changeHandler = event => {
    this.setState({
        email: event.target.value
    })

}


render() {
    return (
        // Navbar Starts 

        <div>
            <div className="row navbar">
                <Link to="/" style={{textDecoration:'none'}}><div className="col-md-2 logo">ReactApp</div></Link>
                <div className="col-md-6"></div>
                <Link to="/" style={{textDecoration:'none'}}> <div className="col-md-1 link"> Home</div> </Link>
                <Link to="/about" style={{textDecoration:'none'}}> <div className="col-md-1 link"> About</div> </Link>
                <Link to="/counter" style={{textDecoration:'none'}}> <div className="col-md-1 link"> Counter </div></Link>
                <Link style={{textDecoration:'none'}}><div className="col-md-1 link">Login</div></Link>
            </div>

            <div className="jumbotron text-center">
                <h1>React-App</h1>
                <p>We specialize in <strong>Web Development</strong></p>

                {/* Subscribing form starts*/}
                <form className="form-inline subscribingForm" onSubmit={this.submitHandler}>
                    <div className="input-group">
                        <input type="email"
                            className="form-control"
                            value={this.state.email}
                            onChange={this.changeHandler}
                            size="80"
                            placeholder="Email..."
                            required />
                        <div className="input-group-btn">
                            <input type="submit" value="Subscribe" className="subscribingBtn" />
                        </div>
                    </div>
                </form>
                {/* Subscribing form closes*/}
            </div>
        </div>

    )
}

}

使用路由器导出默认值（标题）；

Answer 1

. css文件加载在根组件中的哪里？它可能是全局加载的，并用于每个组件。更好地使用JSS（https://cssinjs.org/?v=v10.3.0）