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

Posted 2023-02-22

【中文标题】为啥 ReactJS 中一个组件的 css 文件与另一个组件的 css 文件交互？如何处理？

【英文标题】：Why css file of one component interacted with the css file of another component in ReactJS? How to handle it?为什么 ReactJS 中一个组件的 css 文件与另一个组件的 css 文件交互？如何处理？

【发布时间】：2020-10-13 04:47:09

【问题描述】：

我正在尝试使用 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)导出默认值；

【参考方案1】：

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