反应：styles 被意外导入错误的模块

Question

Im new to React JS, working on my first soon-to-be live site. I have styled input in a form in a seperate component, then imported the styles to that component. After implementing routing, it seems that this style is applied to forms across the site, whether or not i import them. Note, i was initially putting all styles in index.css until I expanded the scope of the site, and this was no longer practical. It now seems that the index.css styles remain, even after i removed the styles im trying to get rid of from index.css. Either that, or there is something wrong with my routing, importing, exporting, that im not seeing, which is causing this bug:

This style is being applied from a different component with its own imported stylesheet. I want the sign up form to appear like a normal form input, but its hidden because of the styles applied to BrowsePhotos.js. I am completely unsure why this happens.

here is my project directory tree

and here is some source code related to possible problem sources

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 // note: home of routing, ive tried commenting out BrowsePhotos from routing. this is then imported to 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;

I've also tried redefining the rule set for label and label input within SignUp.css, to set all the properties to default, or inherits: false, with no luck there.

Answer 1

It sounds like the CSS is not being imported scoped but globally. You could use a CSS-in-JS library like CSS-Modules or react-scoped-css to fix this.

Another way would be to give the html-elements classes and not style them directly. That is usually more scalable.