Javascript 使用ReactJS和静态App.CSS填充CSS
我正在为我在React with context API中的工作构建一个简化的电子商务应用程序,JS中的所有功能都在开发中,我完全理解。然而,我只有基本的CSS知识,并且正在使用Brad Traversy的udemy MERN课程中的App.CSS。到目前为止,它非常有用和方便,但现在我正在做一些似乎稍微超出app.css限制的事情,并在侧栏中对其进行了一些修改。侧边栏工作得几乎完美,但需要修复一个轻微的显示问题。下面是我认为与CSS和react相关的片段,特别是在主app.js中用于包含我的3条路由中的每一条路由的容器类(尽管我现在只关心/pricequoter-route&component) 显示问题的屏幕截图,我希望侧边栏沿着浏览器的左侧对齐,并在切换时完全隐藏 首先是反应片段 App.js代码段Javascript 使用ReactJS和静态App.CSS填充CSS,javascript,css,reactjs,Javascript,Css,Reactjs,我正在为我在React with context API中的工作构建一个简化的电子商务应用程序,JS中的所有功能都在开发中,我完全理解。然而,我只有基本的CSS知识,并且正在使用Brad Traversy的udemy MERN课程中的App.CSS。到目前为止,它非常有用和方便,但现在我正在做一些似乎稍微超出app.css限制的事情,并在侧栏中对其进行了一些修改。侧边栏工作得几乎完美,但需要修复一个轻微的显示问题。下面是我认为与CSS和react相关的片段,特别是在主app.js中用于包含我的3
<div className='container'>
<Switch>
<Route exact path='/' component={Home} />
<Route exact path='/about' component={About} />
<Route exact path='/pricequoter' component={PriceQuoter} />
</Switch>
</div>
感谢所有的帮助,如果有任何其他上下文/信息会有所帮助,请告诉我 作为一般建议,我建议不要将js中的css与css文件相结合;使用一个或另一个,以便阅读代码的任何人都能清楚地了解样式的来源,我完全理解!我正在寻找下一步开发的app.css的替代品,但这只是一个早期跳板。下周我将关注重构,使样式元素直接注入到app.css中的类中。我还重新利用了一篇文章中的大部分侧边栏组件,对于从其中的JS重构样式元素并不是非常确定。
<div>
<div className='grid-2'>
<div>
<CartSidebar width={300} height={"100vh"} />
</div>
<div>
<ProductFilter /> <Products />
</div>
</div>
</div>
<div
className='side-bar'
style={{
transform: `translatex(${xPosition}px)`,
width: width,
minHeight: height,
}}
>
(code for text of sidebar here)...
</div>
.container {
max-width: 1100px;
margin: auto;
overflow: hidden;
padding: 0 2rem;
border: 1px;
}
.grid-2 {
display: grid;
grid-template-columns: 10% 90%;
grid-gap: 2rem;
}
.side-bar {
height: 100% !important;
display: flex;
flex-direction: column;
border-right: 1px solid;
border-radius: 0;
border-color: #d3d3d3;
background-color: rgb(255, 255, 255);
transition: 0.8s ease;
}
.toggle-menu {
cursor: pointer;
height: 65px;
border-top-right-radius: 20rem;
border-bottom-right-radius: 20rem;
width: 30px;
position: absolute;
outline: none;
z-index: 1;
background-color: #009ca6;
color: #fff;
}