【发布时间】：2021-09-03 03:29:01
【问题描述】：
由于我无法识别溢出的原因：hidden 已决定不为我的 react 应用程序工作，起初是昨天或前一天它工作，然后由于我不知道它不工作并且出现 X 轴滚动的原因。然后我第二天回来处理它并溢出：隐藏正在工作，因为没有 x 轴滚动。
今天我一直在做这个项目，然后我重新启动了我的笔记本电脑，因为 npm 没有安装 material-ui 的 npm 安装的一部分，它只是在中途暂停。重新启动我的笔记本电脑后，我尝试再次安装并且工作正常，但是现在溢出：隐藏不起作用，因为每个轴上的滚动都出现了。
我很困惑，因为我的 npm 一直在运行，我不知道为什么这会影响我的 css 样式组件，因为它们没有代码更改。早些时候，当我运行 npm start 时，它抛出了一个我以前从未见过的错误，所以我运行了 npm update，然后 npm start 工作了。每当我现在通过 npm 安装任何我从未使用过的东西时，我也会不断收到一些需要审核的问题的红色警告。
沙盒链接在这里
-
我首先在移动设备上开发它（Iphone 8/8plus 尺寸），所以切换响应式视图，否则会看起来很奇怪并且可能没有意义（尚未完成媒体查询）
-
对于正常工作时的上下文，Y 轴滚动是打开的，因为该站点可以垂直滚动，只是不应该水平滚动
-
我现在把溢出：隐藏在所有容器上，试图摆脱水平滚动，但没有改变
因为codepen在这里不起作用，所以主要的代码文件：
App.js
import React from 'react';
import Styled from 'styled-components';
import website from '../src/Assets/website (1).svg';
import development from '../src/Assets/development.svg';
import design from '../src/Assets/maintenance.svg';
import develop from '../src/Assets/code.svg';
import deploy from '../src/Assets/upload.svg';
import { Hero } from './Components/Hero';
import { Hero1 } from './Components/Hero1';
import { Hero2 } from './Components/Hero2';
import { Hero3 } from './Components/Hero3';
import NavAppBar from './Components/Navigation'
import '@fontsource/roboto';
function App() {
return (
<div>
<NavAppBar/>
<Hero/>
<Hero1/>
<Hero2/>
<Hero3/>
</div>
);
}
export default App;
Hero.js
import React from 'react'
import Styled from 'styled-components';
import development from '../Assets/development.svg';
import design from '../Assets/maintenance.svg';
import develop from '../Assets/code.svg';
import deploy from '../Assets/upload.svg';
export const Hero = () => {
return (
<div>
<Container>
<Title>
Translating Business ideas to an professional online presence
</Title>
<WebsiteSvg/>
<Subtitle>
The Full Front-End Package
</Subtitle>
<Design>
Design
</Design>
<DesignSvg/>
<Develop>
Develop
</Develop>
<DevelopSvg/>
<Deploy>
Deploy
</Deploy>
<DeploySvg/>
</Container>
</div>
)
}
const Container = Styled.div`
position: relative;
display: flex;
height: 100vh;
width: 100vw;
overflow: hidden;
/* height: 100%;
overflow: hidden; */
/* background-color: #DBE6FD;
background-color: #DEEEEA; */
`
const Title = Styled.div`
position: absolute;
width: 212px;
height: 157px;
left: 8%;
top: 51px;
font-family: Noto Sans;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 28px;
display: flex;
align-items: center;
color: #000000;
`
const WebsiteSvg = Styled.div`
position: absolute;
width: 151px;
height: 162px;
left: 55%;
top: 14%;
background-position: center;
background-size: cover;
background-image: url(${development});
transform: rotate(38.43deg);
`
const Subtitle = Styled.div`
position: absolute;
width: 171px;
height: 35px;
left: 10%;
top: 189px;
font-family: Noto Sans;
font-style: normal;
font-weight: 600;
font-size: 10px;
line-height: 28px;
/* or 233% */
display: flex;
align-items: center;
color: #000000;
`
const Design = Styled.div`
position: relative;
width: 64px;
height: 37px;
/* left: 40%; */
margin-left:auto;
margin-right: auto;
vertical-align: middle;
top: 45%;
font-family: Noto Sans;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 28px;
/* or 280% */
display: flex;
align-items: center;
color: #000000;
`
const Develop = Styled.div`
position: relative;
width: 64px;
height: 37px;
margin-left:auto;
margin-right: auto;
vertical-align: middle;
top: 55%;
font-family: Noto Sans;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 28px;
/* or 280% */
display: flex;
align-items: center;
color: #000000;
`
const Deploy = Styled.div`
position: relative;
width: 64px;
height: 38px;
margin-left:auto;
margin-right: auto;
vertical-align: middle;
top: 65%;
font-family: Noto Sans;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 28px;
/* or 280% */
display: flex;
align-items: center;
color: #000000;
`
const DesignSvg = Styled.div`
position: absolute;
width: 95px;
height: 95px;
left: 4%;
top: 53%;
background-position: center;
background-size: cover;
background-image: url(${design});
transform: rotate(38.43deg);
`
const DevelopSvg = Styled.div`
position: absolute;
width: 95px;
height: 95px;
left: 35%;
top: 63%;
background-position: center;
background-size: cover;
background-image: url(${develop});
/* transform: rotate(-28.43deg); */
`
const DeploySvg = Styled.div`
position: absolute;
width: 95px;
height: 95px;
left: 67%;
top: 74%;
background-position: center;
background-size: cover;
background-image: url(${deploy});
/* transform: rotate(-28.43deg); */
`
Hero1.js
import React from 'react'
import Styled from 'styled-components';
import webDesign from '../Assets/webDesign.svg';
import devices from '../Assets/devices.svg';
import profile from '../Assets/profile.svg';
export const Hero1 = () => {
return (
<div>
<Container>
<Title>
Services
</Title>
<ServicesBox>
<DesignSubtitle>
UI/UX Design
</DesignSubtitle>
<DesignSvg/>
<DesignText>
Experience designing with professional UI/UX principles utilising Figma
</DesignText>
<WebSubtitle>
Web Development
</WebSubtitle>
<DevicesSvg/>
<WebText>
Building Responsive and scalable websites and web apps with React
</WebText>
<MobileSubtitle>
Mobile Apps
</MobileSubtitle>
<ProfileSvg/>
<MobileText>
Building mobile webapps, lightning fast and no download required!
</MobileText>
</ServicesBox>
</Container>
</div>
)
}
const Container = Styled.div`
position: relative;
display: flex;
height: 100vh;
width: 100vw;
overflow: hidden;
justify-content: center;
/* height: 100%;
overflow: hidden; */
/* background-color: #DBE6FD;
background-color: #DEEEEA; */
background-color: #DEEEEA;
`
const Title = Styled.div`
position: relative;
width: 253px;
height: 45px;
top: 8%;
/* margin-right: auto;
margin-left: auto;
vertical-align: middle; */
font-family: Noto Sans;
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 28px;
align-items: center;
text-align: center;
color: #000000;
`
const ServicesBox = Styled.div`
position: absolute;
display: flex
justify-content: center;
align-items: center;
top: 13%;
height: 525px;
width: 300px;
margin-left: 5%;
margin-right: 5%;
/* background-color: #DEEEEA; */
border-radius: 70% 20% 60% 40%;
/* opacity: 50%; */
`
const DesignSubtitle = Styled.div`
position: relative;
width: 108px;
height: 36px;
left: 37.5%;
top: 5%;
font-family: Noto Sans;
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 28px;
/* or 233% */
align-items: center;
color: #000000;
`
const WebSubtitle = Styled.div`
position: absolute;
width: 108px;
height: 36px;
left: 32.5%;
top: 40%;
font-family: Noto Sans;
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 28px;
/* or 233% */
align-items: center;
color: #000000;
`
const MobileSubtitle = Styled.div`
position: absolute;
width: 108px;
height: 36px;
left: 37.5%;
top: 75%;
font-family: Noto Sans;
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 28px;
align-items: center;
color: #000000;
`
const DesignSvg = Styled.div`
position: relative;
width: 95px;
height: 95px;
left: 3%;
top: 5%;
background-position: center;
background-size: cover;
background-image: url(${webDesign});
`
const DevicesSvg = Styled.div`
position: absolute;
width: 100px;
height: 100px;
right: 3%;
top: 49%;
background-position: center;
background-size: cover;
background-image: url(${devices});
`
const ProfileSvg = Styled.div`
position: absolute;
width: 95px;
height: 95px;
left: 5%;
top: 85%;
background-position: center;
background-size: cover;
background-image: url(${profile});
transform: rotate(-12.43deg);
`
const DesignText = Styled.div`
position: absolute;
width: 185px;
left: 38%;
top: 18%;
font-family: Noto Sans;
font-style: bold;
font-weight: 500;
font-size: 12px;
line-height: 16px;
/* or 140% */
align-items: center;
text-align: center;
`
const WebText = Styled.div`
position: absolute;
width: 175px;
left: 1%;
top: 55%;
font-family: Noto Sans;
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 16px;
/* or 140% */
align-items: center;
text-align: center;
`
const MobileText = Styled.div`
position: absolute;
width: 165px;
left: 41%;
top: 90%;
font-family: Noto Sans;
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 16px;
/* or 140% */
align-items: center;
text-align: center;
`
Hero2.js
import React from 'react'
import Styled from 'styled-components';
import diagram from '../Assets/diagram.svg'
import structure from '../Assets/structure.svg'
import js from '../Assets/js-format.svg'
import html from '../Assets/file.svg'
import css from '../Assets/css.svg'
export const Hero2 = () => {
return (
<div>
<Container>
<Title>
Web Development Skills
</Title>
<SkillsSvg/>
<SkillBox>
<ReactSvg/>
<JsSvg/>
<HtmlSvg/>
<CssSvg/>
</SkillBox>
</Container>
</div>
)
}
const Container = Styled.div`
position: relative;
display: flex;
height: 100vh;
width: 100vw;
overflow: hidden;
justify-content: center;
/* height: 100%;
overflow: hidden; */
/* background-color: #DBE6FD;
background-color: #DEEEEA; */
background-color: #DBE6FD;
`
const SkillBox = Styled.div`
position: absolute;
display: flex
justify-content: center;
align-items: center;
top: 35%;
height: 400px;
width: 300px;
margin-left: 5%;
margin-right: 5%;
`
const Title = Styled.div`
position: absolute;
width: 180px;
height: 157px;
right: 8%;
top: 8%;
font-family: Noto Sans;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 28px;
/* or 140% */
display: flex;
align-items: center;
text-align: center;
color: #000000;
`
const SkillsSvg = Styled.div`
position: absolute;
width: 137px;
height: 149px;
left: 29px;
top: 10%;
background-position: center;
background-size: cover;
background-image: url(${diagram});
`
const ReactSvg = Styled.div`
position: absolute;
width: 75px;
height: 79px;
left: 45%;
top: 5%;
background-position: center;
background-size: cover;
background-image: url(${structure});
transform: rotate(28.42deg);
`
const JsSvg = Styled.div`
position: absolute;
width: 75px;
height: 79px;
left: 70%;
top: 30%;
background-position: center;
background-size: cover;
background-image: url(${js});
transform: rotate(28.42deg);
`
const HtmlSvg = Styled.div`
position: absolute;
width: 75px;
height: 79px;
left: 10%;
top: 38%;
transform: rotate(-25.03deg);
background-position: center;
background-size: cover;
background-image: url(${html});
`
const CssSvg = Styled.div`
position: absolute;
width: 75px;
height: 79px;
left: 45%;
top: 65%;
background-position: center;
background-size: cover;
background-image: url(${css});
transform: rotate(26.96deg);
`
Hero3.js
import React from 'react'
import Styled from 'styled-components';
export const Hero3 = () => {
return (
<div>
<Container>
<Title>
Portfolio
</Title>
</Container>
</div>
)
}
const Container = Styled.div`
position: relative;
display: flex;
height: 100vh;
width: 100vw;
overflow: hidden;
justify-content: center;
/* height: 100%;
overflow: hidden; */
/* background-color: #DBE6FD;
background-color: #DEEEEA; */
`
const Title = Styled.div`
position: absolute;
width: 180px;
height: 157px;
right: 8%;
top: 8%;
font-family: Noto Sans;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 28px;
/* or 140% */
display: flex;
align-items: center;
text-align: center;
color: #000000;
`
【问题讨论】：
-
沙盒显示默认文本。也许你还没有更新/保存它？
-
您仍然在引用具有默认文本的
App组件。 Hero* 组件无处不在 -
这太烦人了，我讨厌 codepen 这曾经发生过，但是每次我点击链接它都可以正常工作，我在这里发布代码文件
-
lwnnd.csb.app 也尝试此链接，但单击右下角按钮打开沙箱，它应该带您到我制作的沙箱 - 对我有用 - 如果我做错了什么，请明确说明如何保存它，因为它似乎是为我保存的
标签： css reactjs styled-components