只为单个网页为 body 标签提供自定义填充答案

【问题标题】：give body tag a custom padding for single web page only只为单个网页为 body 标签提供自定义填充
【发布时间】：2019-01-26 15:12:58
【问题描述】：

我正在为我的网站使用 laravel 5.6 和 react.js。我有一个带有

的布局文件

<body>
    <div id="app">
    </div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>

我已经扩展了这个 app.blade.php 是所有的视图。正文 CSS：

body {
    padding-top: 80px;
    font-family: 'Muli', sans-serif
}

对于其中一个反应组件（错误页面），我希望我的正文填充为零。因此，当 Error Page 加载应用于 body 但其余组件填充的零填充时，填充不会过载。这里的错误页面有 relative_particle 类

 <body>
    <div id="app">
       <div data-reactroot="">
       <div>
         <!-- react-empty: 8 -->
       </div>
           **<div class="relative_particle">
           </div>**
       </div>
    </div>
</bod>

我希望那些具有 relative_particle 类 div 的组件应该有 0 padding body css 。有什么办法可以解决。 注意：我的项目中没有使用 jquery lib。

【问题讨论】：

标签： css html reactjs dom css-selectors

【解决方案1】：

为您的错误页面添加此样式：

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

然后您可以执行以下操作将此类添加到正文中：

document.body.className += ' ' + 'nopadding';

确保您只在错误页面上运行上述脚本。如果无法区分它们，请检查 relative_particle 类是否存在，然后运行上面的脚本。

你可以看到更多关于操纵身体类的细节here。

还要确保你wait for the DOM。

【讨论】：