為什么一個組件的css文件與ReactJS中另一個組件的css文件交互？ 如何處理？

Question

我正在嘗試使用 Reactjs 制作網站模板。在 Jumbotron 部分我制作訂閱表格，在主頁部分制作用戶輸入表格。 但是一個組件的 css 與另一個組件交互。 我該如何處理？ [1]: https://i.stack.imgur.com/Wd4OQ.png

用戶入口：-

import React, { Component } from 'react'

導入 './User Entry.css'

class Form extends Component { 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>

    )
}

}

導出默認表單

Header JS:-

import React, { Component } from 'react'

import './Header.css' import { Link, withRouter } from "react-router-dom";

class Header 擴展組件 { 構造函數（道具）{ 超級（道具）

    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>

    )
}

}

導出默認 withRouter(Header);

Answer 1

.css 文件在哪里加載，在根組件中？ 它可能是全局加載並用於每個組件。最好使用 JSS ( https://cssinjs.org/?v=v10.3.0 )

Answer 2

一般來說，反應會轉換所有 css 並將其添加到標簽中。 結果，您的一個文件 css 與其他文件發生沖突。 如果你想避免這種情況，你可以使用模塊化css。https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/

Answer 3

使用 jss 會讓你的 issue 到 go 遠