How to use styled-bootstrap-grid - 6 common examples

import { color, flex, space, textAlign, width } from "styled-system"
export { media } from "styled-bootstrap-grid"

// @ts-ignore
import styled, { StyledComponentClass } from "styled-components"

const DEBUG = false

export const Grid = styled(StyledGrid.Container)`
  ${space};
`
export const Row = styled(StyledGrid.Row)`
  ${color};
  ${space};
`
export const Col = styled(StyledGrid.Col)`
  ${color};
  ${flex};
  ${space};
  ${textAlign};
  ${width};

  ${() => {
    if (DEBUG) {
      return `
        border: 1px solid #ddd;
      `
    }
  }};
`

import * as StyledGrid from "styled-bootstrap-grid"
import { color, flex, space, textAlign, width } from "styled-system"
export { media } from "styled-bootstrap-grid"

// @ts-ignore
import styled, { StyledComponentClass } from "styled-components"

const DEBUG = false

export const Grid = styled(StyledGrid.Container)`
  ${space};
`
export const Row = styled(StyledGrid.Row)`
  ${color};
  ${space};
`
export const Col = styled(StyledGrid.Col)`
  ${color};
  ${flex};
  ${space};
  ${textAlign};
  ${width};

  ${() => {
    if (DEBUG) {
      return `

import * as StyledGrid from "styled-bootstrap-grid"
import { color, flex, space, textAlign, width } from "styled-system"
export { media } from "styled-bootstrap-grid"

// @ts-ignore
import styled, { StyledComponentClass } from "styled-components"

const DEBUG = false

export const Grid = styled(StyledGrid.Container)`
  ${space};
`
export const Row = styled(StyledGrid.Row)`
  ${color};
  ${space};
`
export const Col = styled(StyledGrid.Col)`
  ${color};
  ${flex};
  ${space};
  ${textAlign};
  ${width};

  ${() => {
    if (DEBUG) {
      return `
        border: 1px solid #ddd;
      `
    }

export function injectGlobalCSS() {
  injectLayoutBaseCSS(`
    ${reset};

    html,
    body,
    #root {
      height: 100%;
    }
    body {
      margin: 0;
      padding: 0;
    }

    @font-face {
      font-family: Unica77LL-Regular;
      src: url(/assets/fonts/Unica77LL-Regular.otf);
    }

`};

  :not([disabled]):hover {
    color: ${(props: { variant: string }) => fontColors[props.variant]};
    opacity: 0.9;
  }

  ${(props: { variant: string, disabled: boolean }) =>
    props.disabled &&
    css`
      opacity: 0.9;
      cursor: not-allowed;

      background-color: ${colors.shadeBeta};
      color: ${rgba(colors.white, 0.95)};
    `} ${media.lg`
    font-size: 14px;
  `};
`

export const Spinner = styled.span`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  transition-duration: 250ms;
  position: absolute;
  top: -28px;
  height: 28px;
  left: 0;
  transform: ${(props: { loading: boolean }) =>
    props.loading ? 'translate3d(0, 2.5rem, 0)' : 'translate3d(0, 0, 0)'};

}
    `};
`

export const StackableBorderBox = styled(BorderBox)`
  :not(:first-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  :not(:last-child) {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  ${media.sm`
    padding: ${space(3)}px;
    ${styledSpace};
  `};
`

export interface BoxProps
  extends BackgroundProps,
    BottomProps,
    BottomProps,
    ColorProps,
    DisplayProps,
    HeightProps,
    LeftProps,
    LeftProps,
    MaxWidthProps,
    PositionProps,