大佬教程收集整理的这篇文章主要介绍了反应：样式意外导入到错误的模块，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我是 React Js 的新手，正在我的第一个即将上线的网站上工作。我在单独组件中的表单中设置了样式，然后将样式导入到该组件中。实现路由后，好像这个 样式应用于整个站点的表单，无论我是否导入它们。注意，我最初是把所有 index.CSS 中的样式，直到我扩展了站点的范围，这不再实用。现在看来 index.CSS 样式仍然存在，即使我删除了我试图从 index.CSS 中删除的样式。要么是这样，要么是我的路由、导入、导出有问题，我看不到，这导致了这个错误：
@L_502_0@
此样式是从具有自己导入的样式表的不同组件应用的。 我希望注册表单看起来像正常的表单输入，但由于样式而隐藏 应用于 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，但没有运气。
听起来 CSS 不是在范围内导入，而是在全局范围内导入。您可以使用 CSS-Modules 或 react-scoped-css 之类的 CSS-in-JS 库来解决此问题。
另一种方法是给 html-elements 类而不是直接设置它们的样式。这通常更具可扩展性。
以上是大佬教程为你收集整理的反应：样式意外导入到错误的模块全部内容，希望文章能够帮你解决反应：样式意外导入到错误的模块所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。