How to use the linaria/react.styled.div function in linaria

// @flow

import {styled} from 'linaria/react'

export const SettingsGroup = styled.div`
  --settings-row-padding: 15px;

  background-color: #f7f7f7;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  grid-column: 3 / span 1;
  grid-row: 3 / span 3;

  @media (max-width: 699px) {
    grid-column: 1 / span 1;
    grid-row: 3 / span 7;
  }
`

export const Label = styled.label`
  display: grid;

/* @flow */

import { styled } from 'linaria/react';

const Layout = styled.div`
  display: flex;
  height: 100%;
  flex-direction: column;

  @media (min-width: 640px) {
    flex-direction: row;
  }
`;

export default Layout;

import React from 'react'
import Head from 'next/head'
import { styled } from 'linaria/react'

const Box = styled.div`
  margin-top: 40px;
  margin-left: 40px;
  height: 200px;
  width: 200px;
  background-color: tomato;
  animation: spin 2s linear infinite;

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

box-shadow: ${RESTING_SHADOW};
    background-color: ${PRIMARY_COLOR};
    border-color: ${PRIMARY_COLOR};
    color: #fff;

    &:hover,
    &:focus,
    &:active {
      background-color: ${PRIMARY_COLOR};
      color: #fff;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.24);
    }
  }
`;

const Gallery = styled.div`
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0px -16px;
  min-width: 0;

  > img {
    box-shadow: ${RESTING_SHADOW};
    display: block;
    max-height: 480px;
    width: auto;
    margin: 16px;
  }
`;

//@flow

import {styled} from 'linaria/react'
import type {Context} from '../index.h'

type Props = {|
  theme: Context,
|}

/**
 * Object root
 */
export const Root = styled.div`
  display: inline-block;
  word-break: break-all;

  &::after {
    content: ' ';
    display: inline-block;
  }

  & > li {
    background-color: transparent !important;
    display: inline-block;
  }

  & ol:empty {
    padding-left: 0 !important;
  }

const Outline = styled.div`
  grid-column: 1 / span 1;
  grid-row: 3 / span 7;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  font-size: 0.8rem;
  overflow: auto;

  @media (min-width: 700px) {
    grid-column: 1 / span 1;
    grid-row: 1 / span 5;
  }
`

const Header = styled.div`
  padding: 3px 5px;
  background: #f7f7f7;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
`

const Section = styled.section`
  padding: 5px;
`

const EmptySection = styled.section`
  padding: 15px;
`

const Item = styled.li`
  cursor: ${props => (Boolean(props.loc) ? 'pointer' : 'inherit')};

import React from 'react';
import { styled } from 'linaria/react';

import { Spacer } from './common';
import MouseMove from '../Hero/MouseMove';
import { gradient } from '../Hero/common';

const Wrapper = styled.div`
  position: relative;
  overflow: hidden;
  z-index: 1;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 5.5rem 0;

  color: #fff;
  font-size: 2rem;

  position: fixed;
  bottom: 0;
  left: 0;

import { styled } from "linaria/react";

const FormWrapper = styled.div`
  height: 100vh;
  width: 100%;
  background: #f0f0f0;


  form {
    width: 300px;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%);
  }

  h3 {
    color: #444
    font-size: 1.5em;

<p>All CSS is extracted when transpiling the code with Babel.</p>
          
          
            <figure>
              
            </figure>
            <title type="h4">SSR with critical CSS</title>
            <p>Critical CSS can be determined for SSR to improve load time.</p>
          
        
      
    
  );
}

const Features = styled.div`
  margin: 70px 0;

  ${media.medium} {
    margin: 120px 0;
  }
`;

const Content = styled.div`
  ${media.medium} {
    display: flex;
    justify-content: space-around;
    margin-left: -30px;
    margin-right: -30px;
  }
`;

onClick={this._handleIconClick}
              >
                {this._getIconCharacter(name)}
                {name}
              
            ))}
          
        ) : (
          <p>No matching icon found :(</p>
        )}
      
    );
  }
}

const Container = styled.div`
  margin: 16px 0;
`;

const IconContainer = styled.button`
  appearance: none;
  border: 0;
  background: 0;
  outline: 0;
  display: flex;
  flex-direction: column;
  width: 124px;
  height: 124px;
  align-items: center;
  text-align: center;

  @media (max-width: 680px) {