Wrapper

Wrapper creates the necessary structure to wrap elements so that full width backgrounds can be applied.

Basics

import { StyleProvider, Wrapper } from "@muil/components";

<StyleProvider>
  <Wrapper>content</Wrapper>
</StyleProvider>;

Full (fluid) width header or footer

import {
  StyleProvider,
  Container,
  Wrapper,
  Row,
  Column,
  Image,
  Text,
} from "@muil/components";

<StyleProvider>
  <Container>
    <Wrapper class="header" bgcolor="#8a8a8a" style={{ background: "#8a8a8a" }}>
      <Container>
        <Row class="collapse">
          <Column small="6" valign="middle">
            <Image src="https://placehold.it/200x50/663399" />
          </Column>
          <Column small="6" valign="middle">
            <Text class="text-right">BASIC</Text>
          </Column>
        </Row>
      </Container>
    </Wrapper>
  </Container>
</StyleProvider>;

Properties

Property	Type	Description
bgcolor	String	background color
style	Object	style
innerStyle	String	style of inner component
className	String	class name
innerClassName	String	class name of inner component