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

Question

我正在尝试使用 Reactjs 制作网站模板。在 Jumbotron 部分我制作订阅表格，在主页部分用户输入表格。但是一个组件的 css 与另一个组件的 css 交互。我该如何处理？ [1]：https://i.stack.imgur.com/Wd4OQ.png

User EntryJs:-

import React, { Component } from 'react'

导入'./User Entry.css'

类表单扩展组件{ 初始状态 = { 姓名： ””， 年龄： ””， 工作： ”” } 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, withRouter };

类头扩展组件{ 构造函数（道具）{ 超级（道具）

    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>

    )
}

}

用Router(Header)导出默认值；

Answer 1

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