代码之家  ›  专栏  ›  技术社区  ›  Colin Ricardo

根div padding react(样式化组件)

  •  1
  • Colin Ricardo  · 技术社区  · 8 年前

    我有一个简单的react应用程序,使用redux的 Provider 包装我的 App 组件。

    import React from 'react';
    import ReactDOM from 'react-dom';
    import styled from 'styled-components';
    import { Provider } from 'react-redux';
    import App from './App';
    import store from './store';
    import registerServiceWorker from './registerServiceWorker';
    
    const MainContainer = styled.div`
      margin: 0;
      padding: 0;
      height: 100vh;
      background-color: red;
    `;
    
    ReactDOM.render(
      <MainContainer>
        <Provider store={store}>
          <App />
        </Provider>
      </MainContainer>,
      document.getElementById('root'),
    );
    
    registerServiceWorker();
    

    但是,当这个应用程序呈现时,屏幕边缘(所有边)都有一个空白。覆盖body标记的正确方法是什么? 应用 内容转到屏幕边缘?

    White Margin should not be there.

    2 回复  |  直到 8 年前
        1
  •  7
  •   Tholle    8 年前

    这是浏览器的默认样式。你可以用一些像 Normalize.css ,或者直接移除身体的边缘和填充物。

    body {
      margin: 0;
      padding: 0;
    }
    

    你可以这样做 injectGlobal .

    import { injectGlobal } from 'styled-components';
    
    injectGlobal`
      body {
        margin: 0;
        padding: 0;
      }
    `;
    
        2
  •  2
  •   Colin Ricardo    8 年前

    感谢您的回答,但我正在寻找一个特定于样式组件的答案。

    原来样式化组件有一个helper方法, injectGlobal ,它可以覆盖全局主体标记。

    使用它,可以设置所需的属性——在本例中,没有边距/填充。因此,将以下内容添加到 index.js 解决了这个问题。

    import { injectGlobal } from 'styled-components';
    
    injectGlobal`
      body {
        margin: 0;
        padding: 0;
      }
    `;