在响应中使CSS特定于404错误页面

时间:2018-11-29 10:17:25

标签: javascript reactjs

我有一个要呈现的错误成分

该页面可以运行文件,但是为了使组件正确显示内容,我必须在主体上应用一些全局CSS。

 body{
            background: #ff7300;
            color:#fff;
            font-family: 'Open Sans', sans-serif;
            max-height:700px;
            overflow: hidden;
        }

如果我使用环绕式div,它将无法正常工作。

最大高度设置不正确,我的动画仅在应用全局主体css时有效。

以下是一些我的动画示例:

        .x1_5{
            top:-80px;
            left:250px;
            -webkit-transform: scale(0.3);
            -moz-transform: scale(0.3);
            transform: scale(0.3);
            -webkit-animation: moveclouds 17s linear infinite;
            -moz-animation: moveclouds 17s linear infinite;
            -o-animation: moveclouds 17s linear infinite; 
        }

        .x2 {
            left: 250px;
            top:30px;
            -webkit-transform: scale(0.6);
            -moz-transform: scale(0.6);
            transform: scale(0.6);
            opacity: 0.6; 
            -webkit-animation: moveclouds 25s linear infinite;
            -moz-animation: moveclouds 25s linear infinite;
            -o-animation: moveclouds 25s linear infinite;
        }

        .x3 {
            left: 250px; bottom: -70px;

            -webkit-transform: scale(0.6);
            -moz-transform: scale(0.6);
            transform: scale(0.6);
            opacity: 0.8; 

            -webkit-animation: moveclouds 25s linear infinite;
            -moz-animation: moveclouds 25s linear infinite;




    <div className="error">
    <div id="clouds">
    <div class="cloud x1"></div>
    <div class="cloud x1_5"></div>
    <div class="cloud x2"></div>
    <div class="cloud x3"></div>
    <div class="cloud x4"></div>
    <div class="cloud x5"></div>
</div>
<div class='c'>
    <div class='_404'>404</div>
    <hr></hr>
    <div class='_1'>THE PAGE</div>
    <div class='_2'>WAS NOT FOUND</div>
    <a class='btn' href='#'><span>BACK TO SAFETY </span> 
</a>
    </div>
</div>

使用正文CSS的问题是,它适用于渲染404页面的主要组件。

这是反应路线,我正在主要App.js组件中渲染

   <Switch>
    <Route path="*" exact={true} component={ErrorPage}> 
</Route>
    </Switch>

有没有办法,我可以使css仅在呈现此组件时应用,或使其与包装的html标签一起使用。

0 个答案:

没有答案