How to use the frontity.styled.button function in frontity

) : (
            
          )}
        

        {/* If the menu is open, render the menu modal */}
        {isMenuOpen && }
      
      <nav>
    
  );
};

export default connect(Header);

const MenuToggle = styled.button`
  position: absolute;
  right: 24px;
  top: 24px;
  background: transparent;
  border: 0;
  color: white;
  z-index: 5;
`;

const Container = styled.div`
  width: 848px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 24px;
  color: #fff;
  display: flex;</nav>

import { styled, css } from "frontity";
import React from "react";

// Base styling for all toggle buttons
export const BaseToggle = styled.button`
  appearance: none;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  text-align: inherit;
  user-select: none;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: inherit;
  padding: 0;
  text-transform: none;

display: none;
  }

  @media (min-width: 700px) {
    border: none;
    font-size: 3.2rem;
    height: 14rem;
  }

  &:focus {
    outline: thin dotted;
    outline-offset: -4px;
  }
`;

const CloseButton = styled.button`
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: inherit;
  padding: 0;
  text-transform: none;

  color: #000000;
  align-items: center;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  margin-right: -2.5rem;

font-size: 1.6rem;
  letter-spacing: -0.015em;
  max-width: 100%;
  padding: 1.5rem 1.8rem;
  width: 100%;
  margin: 0 0 0.8rem 0.8rem;

  &::-webkit-search-decoration,
  &::-webkit-search-cancel-button,
  &::-webkit-search-results-button,
  &::-webkit-search-results-decoration {
    display: none;
  }
`;

const Button = styled.button`
  flex-shrink: 0;
  background-color: #cd2653;
  font-size: 1.7rem;
  border: none;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.0333em;
  line-height: 1.25;
  opacity: 1;
  padding: 1.1em 1.44em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;

import { styled } from "frontity";

const Button = styled.button`
  background-color: ${props => props.bg};
  font-size: 1.7rem;
  border: none;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.0333em;
  line-height: 1.25;
  padding: 1.1em 1.44em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
`;

import React from "react";
import { Global, css, connect, styled, URL } from "frontity";
import Package from "../types";
import aclonicaEot from "./fonts/aclonica-v10-latin-regular.eot";
import aclonicaWoff from "./fonts/aclonica-v10-latin-regular.woff";
import aclonicaWoff2 from "./fonts/aclonica-v10-latin-regular.woff2";
import aclonicaTtf from "./fonts/aclonica-v10-latin-regular.ttf";
import aclonicaSvg from "./fonts/aclonica-v10-latin-regular.svg";

const Div = styled.div`
  font-family: "Aclonica";
  width: 300px;
`;

const Button = styled.button`
  margin: 20px 0;
`;

const All: React.FC = () => {
  const [global, setGlobal] = React.useState(false);
  return (
    <>
      {global && (

display: none;
  }

  @media (min-width: 700px) {
    border: none;
    font-size: 3.2rem;
    height: 14rem;
  }

  &:focus {
    outline: thin dotted;
    outline-offset: -4px;
  }
`;

const CloseButton = styled.button`
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: inherit;
  padding: 0;
  text-transform: none;

  color: #000000;
  align-items: center;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  margin-right: -2.5rem;