javascript - 反应：样式被意外导入错误的模块

问题描述

我是 React JS 的新手，正在开发我的第一个即将上线的网站。我在一个单独的组件中对表单中的输入进行了样式化，然后将样式导入到该组件中。在实现路由之后，无论我是否导入它们，这种样式似乎都应用于整个站点的表单。请注意，我最初将所有样式都放在 index.css 中，直到我扩展了站点的范围，这不再实用。现在似乎 index.css 样式仍然存在，即使在我删除了我试图从 index.css 中删除的样式之后。要么，要么我的路由，导入，导出有问题，我没有看到，这导致了这个错误：

此样式是从具有自己导入样式表的不同组件中应用的。我希望注册表单看起来像一个普通的表单输入，但由于应用于 BrowsePhotos.js 的样式，它被隐藏了。我完全不确定为什么会发生这种情况。

这是我的项目目录树

这是一些与可能的问题来源相关的源代码

src/components/auth/SignUp.js

import React, { useState } from 'react'
import './auth.css';


const SignUp = () => {



    return(
        <form onSubmit={handleSubmit} className="App-sign-up">
            <label className="auth-field"> Email:
                <input onChange={handleEmailChange} type="text"/>

                { !emailError && <div className="error">{emailError}</div>}
            </label>

            <label className="auth-field"> Password:
                <input onChange={handlePasswordChange} type="password"/>

                { !passwordError && <div className="error">{passwordError}</div>}
                {/* should also define errors for the other offenders- length, expected characters */}
            </label>

            { password && 
                <label className="auth-field"> Password:
                    <input onChange={handleConfirmPasswordChange} type="password"/>
                    { !confirmPasswordError && <div className="error">{confirmPasswordError}</div>}
                    { password !== confirmPassword && <div className="error">Password and Confirm Password must match</div>  }
                </label>
            }
            <button type="submit">Create Account</button>
            <div>Already have an account? Sign In!</div>
        </form>
    )

}
export default SignUp;

src/components/photos/UploadForm.js

import React, { useState } from 'react';
import ProgressBar from './ProgressBar';
import './UploadForm.css'



// TODO: add a new controlled component for providing text to use
// as photo description/ alt text.
const UploadForm = () => {
    
    //equivalent to setting state to '' in class based component
    const [file, setFile] = useState(null);
    // const [description, setDescription] = useState(null);
    const [error, setError] = useState(null);


    const handleChange = event => {
    
        // reference to the selected file,
        // and a list of allowable image types
        const selected = event.target.files[0]
        const types = ['image/png','image/jpeg'] 


        if (selected && types.includes(selected.type)) {
            setFile(selected);
            setError('');
            // if (event.target.type === 'textarea') {
            //     console.log("we got a description")
            // }
        } else {
            setFile(null);
            setError('Enter a valid photo type : jpg or png')
        }


    }

    
        return (
            <form>
                <label>
                    <span>+</span>
                    <input onChange={handleChange} type="file"/>

                    {/* <div className="description">
                        <label className="inner-label">Description of the uploaded file</label>
                        <textarea cols="30" rows="10"
                        onChange={handleChange}
                        ></textarea>
                    </div> */}
                    
                </label>
                
                <div className="output">
                    { error && <div className="error" >{ error }</div>}
                    { file  && <ProgressBar file={file} setFile={setFile}/>}
                </div>
            </form>
          );
} 
export default UploadForm;

src/components/photos/UploadForm.css

form{
    margin: 30px auto 10px;
    text-align: center;
  }
  label input{
    height: 0;
    width: 0;
    opacity: 0;
  }
  label{
    display: block;
    width: 30px;
    height: 30px;
    border: 1px solid var(--primary);
    border-radius: 50%;
    margin: 10px auto;
    line-height: 30px;
    color: var(--primary);
    font-weight: bold;
    font-size: 24px;
  }
  label:hover{
    background: var(--primary);
    color: white;
  }
  .output{
    height: 60px;
    font-size: 0.8rem;
  }
  .error{
    color: var(--error);
  }

src/index.css

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap');

:root{
  --primary: #efb6b2;
  --secondary: #4e4e4e;
  --error: #ff4a4a;
}

/* base styles & title */
body{
  font-family: "Noto Serif";
  color: var(--secondary);
}
.App{
  max-width: 960px;
  margin: 0 auto;
}
.title h1{
  color: var(--primary);
  font-size: 1.2rem;
  letter-spacing: 2px;
  font-weight: normal;
}

src/components/general/title // 注意：路由的主页，我尝试从路由中注释掉 BrowsePhotos。然后将其导入 app.js

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import './general.css'

import About from '../general/About';
import SignIn from '../auth/SignIn';
import SignUp from '../auth/SignUp';
import BrowsePhotos from '../photo/BrowsePhotos';
import BrowseProfiles from '../auth/BrowseProfiles';

const Title = () => {
  return (
    <div className="title">
      <Router>
            <nav style={{padding: "5px"}}>
                <h1 className="title">Oral-History</h1>

                <h1> 
                    <Link to="/about">About</Link>
                </h1>

                <h1> 
                    <Link to="/sign-in">Sign In</Link>
                    {/* becomes sign-out when user is signed in */}
                </h1> 
                
                <h1>
                    <Link to="/sign-up">Sign Up</Link>
                    {/* sign-up becomes 'my profile' after sign in */}

                </h1>
                
                <h1> 
                    <Link to="/profiles">Profiles</Link>
                </h1>
                
                <h1> 
                    <Link to="/photos">All Photos</Link>
                </h1>
            </nav> 
            
            <Route exact path="/about" component={About}/>
            <Route exact path="/sign-in" component={SignIn}/>
            <Route exact path="/sign-up" component={SignUp}/>
            <Route exact path="/profiles" component={BrowseProfiles}/>
            <Route exact path="/photos" component={BrowsePhotos}/>

        </Router>

      
    </div>
  )
}

export default Title;

我还尝试在 SignUp.css 中重新定义标签和标签输入的规则集，将所有属性设置为默认值，或者继承：false，但没有运气。

标签： javascriptcssreactjs

javascript - 反应：样式被意外导入错误的模块

问题描述

解决方案

推荐阅读