@emotion/react#css JavaScript Examples

InstallBar = () => (
  <InstallBarStyled>
    <InstallBarContainer>
      <div
        css={css`
          margin-right: 15px;
          margin-bottom: 5px;
          margin-top: 5px;
          ${media.lg} {
            margin-top: 0;
            margin-bottom: 0;
          }
        `}
      >
        <Gift
          css={css`
            vertical-align: -5px;
            margin-right: 10px;
          `}
        />
        Install Popper
      </div>
      <Bar>
        <LogoWrapper>
          <Logo src={npmLogo} width="50" height="20" alt="npm logo" draggable="false" />
        </LogoWrapper>
        <CopyTextToClipboardWrapper text='npm i @popperjs/core' />
      </Bar>
      <Bar>
        <LogoWrapper>CDN</LogoWrapper>
        <CopyTextToClipboardWrapper text={UNPKG_CDN_URL} />
      </Bar>
    </InstallBarContainer>
  </InstallBarStyled>
)

Header = () => {
  const { pathname } = useLocation();
  const { colors, isLight, toggleTheme } = useThemeContext();

  return (
    <header css={[headerStyle(colors, isLight)]}>
      <nav>
        <div className="logo">
          <Link to="/" replace={pathname === '/'}>
            <LogoIcon />
            brand
          </Link>
        </div>
        <div>
          {isLight ? (
            <SunIcon className="theme" onClick={toggleTheme} />
          ) : (
            <MoonIcon className="theme" onClick={toggleTheme} />
          )}
        </div>
      </nav>
    </header>
  );
}

Header = () => (
  <HeaderStyled>
    <picture>
      <source
        srcset={popperLogoOutlined}
        media="(prefers-color-scheme: dark)"
      />
      <source
        srcset={popperLogo}
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
      />
      <Logo src={popperLogo} alt="Popper logo" draggable="false" width="200" height="200" />
    </picture>

    <Slogan>
      Tooltip &amp; Popover <br /> Positioning Engine
    </Slogan>
    <SubSlogan>
      Weighs just <strong>3 kB!</strong>
    </SubSlogan>
    <div
      css={css`
        margin-top: 30px;
      `}
    >
      <a
        css={buttonCss}
        href="https://github.com/popperjs/popper-core"
        rel="nofollow noreferrer"
      >
        <GitHub css={iconCss} /> Star on GitHub
      </a>
      <Link to="/docs/v2/" css={buttonCss}>
        <Terminal css={iconCss} />
        Documentation
      </Link>
    </div>
  </HeaderStyled>
)

ErrorPage = () => {
  const { colors } = useThemeContext();

  return (
    <div css={[ErrorPageStyle(colors)]}>
      <h1>Page Not Found.</h1>
      <img src={TakenSVG} alt="" />
      <Link to="/">go Home</Link>
    </div>
  );
}

PopcornBox = forwardRef((props, ref) => (
  <img
    ref={ref}
    alt="Popcorn box"
    {...props}
    width="134"
    height="120"
    css={css`
      position: relative;
      left: 50%;
      width: 134px;
      height: 120px;
      margin-left: -67px;
      transform: scale(0.8);

      ${media.sm} {
        transform: scale(1);
      }
    `}
  />
))

Footer = () => {
  const { isLight } = useThemeContext();

  return (
    <footer css={[footerStyle]}>
      <nav>
        <div>{new Date().getFullYear()} &copy; your copyright</div>
        <div>
          <a href="https://github.com/ofnullable/react-spa-template" rel="noopener noreferrer" target="_blank">
            <GithubIcon css={iconStyle(isLight ? '#000' : '#fff')} className="github" />
          </a>
        </div>
      </nav>
    </footer>
  );
}

EditPage = ({ path }) => (
  <MdxRoutes>
    {routes => {
      const route = routes.find(route => route.slug === path);

      return (
        route && (
          <a
            css={css`
              margin-top: 15px;
              display: inline-block;
            `}
            href={`https://github.com/popperjs/website/edit/master/src/${
              route.fileAbsolutePath.split('/src/')[1]
            }`}
            rel="noopener noreferrer"
            target="_blank"
          >
            Edit this page
          </a>
        )
      );
    }}
  </MdxRoutes>
)

globalStyle = (colors) => css`
  body {
    color: ${colors.gray[9]};
    background: ${colors.gray[1]};
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-property: border, background, color;
  }

  main {
    flex: 1;
    margin: 0 auto;
    max-width: 1280px;
    display: flex;
    flex-direction: column;
  }
`

Container = styled.div`
  background: #c83b50;
  position: fixed;
  top: 0;
  height: 100%;
  width: ${NAVIGATION_WIDTH}px;
  transform: translateX(-${NAVIGATION_WIDTH}px);
  display: none;
  z-index: 2;
  box-shadow: 10px 0 20px -2px rgba(80, 0, 20, 0.2);

  ${props =>
    props.open &&
    css`
      display: flex;
      flex-direction: column;
      transform: translateX(0);
    `}

  ${media.lg} {
    display: flex;
    flex-direction: column;
    transform: translateX(0);
    box-shadow: none;
  }
`

getVariantCSS = (variant) => {
  if (variant === 'text') {
    return css`
      :empty::before {
        content: "\\00a0";
      }
    `;
  }
}

export default function ThemeSwitcher({ themeName, setThemeName }) {
  if (typeof themeName === 'undefined') return null
  const checked = themeName === "light"

  function flipTheme() {
    if (themeName === "light") {
      setThemeName("dark")
    } else {
      setThemeName("light")
    }
  }

  return <div>
    <Switch onChange={flipTheme}
            checked={checked}
            offColor={"#222"}
            onColor={"#fff"}
            onHandleColor={"#0288d1"}
            offHandleColor={"#0288d1"}
            uncheckedIcon={
              <FiMoon css={iconCommonCss} />
            }
            checkedIcon={
              <FiSun css={iconCommonCss} color={"#222"} />
            }
            role="switch"
            aria-checked={String(checked)}
            aria-label={checked ? "Toggle dark theme" : "Toggle light theme"}
    />
  </div>
}

globalCss = (props) => css`
    html, body {
        margin: 0px;
        background-color: ${props.colors.backgroundColor};
    }

    * {
        box-sizing: border-box;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline; 
    }

`

table = props => (
  <Box
    as="table"
    mt={0}
    mb="4x"
    fontSize="md"
    lineHeight="lg"
    css={css`
      border-spacing: 0;
      border-collapse: collapse;
    `}
    {...props}
  />
)

MyGlobals = () => (
  <div>
    <Global
      styles={css`
        body {
          background: red;
        }
      `}
    />
    <GlobalStyles />
  </div>
)

GlobalStyle = ({ children }) => {
  const { colorMode } = useColorMode()

  return (
    <>
      <Global
        styles={css`
          ${colorMode === 'light' ? prismLightTheme : prismDarkTheme};
          html {
            min-width: 356px;
            scroll-behavior: smooth;
          }
          #__next {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            background: ${colorMode === 'light' ? 'white' : '#15161a'};
          }
        `}
      />
      {children}
    </>
  )
}

Content = forwardRef((props, ref) => {
  return (
    <Box
      ref={ref}
      css={css`
        >:first-of-type {
          margin-top: 0!important;
        }
        >:last-child {
          margin-bottom: 0!important;
        }
      `}
      py="3x"
      px="4x"
      {...props}
    />
  );
})

prismLightTheme = css`
  ${prismBaseTheme};
  code[class*='language-'],
  pre[class*='language-'] {
    color: ${theme.colors.gray[800]};
  }
  :not(pre) > code[class*='language-'],
  pre[class*='language-'] {
    background: ${theme.colors.gray[50]};
    border: 1px solid ${theme.colors.gray[200]};
  }
  .mdx-marker {
    background-color: hsla(204, 45%, 96%, 1);
  }
`

getAnimationCSS = (animation) => {
  if (animation === 'pulse') {
    return css`
      animation: ${pulse} 1.5s ease-in-out .5s infinite;
    `;
  }

  if (animation === 'wave') {
    return css`
      overflow: hidden;
      position: relative;
      &::after {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: "";
        animation: ${wave} 1.6s linear .5s infinite;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
      }
    `;
  }
}

Event.propTypes = {
  name: PropTypes.string.isRequired,
  startTime: PropTypes.instanceOf(moment).isRequired,
  endTime: PropTypes.instanceOf(moment).isRequired,
  description: PropTypes.string,
  location: PropTypes.string,
  eventStyles: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.instanceOf(css),
  ]),
  eventCircleStyles: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.instanceOf(css),
  ]),
  eventTextStyles: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.instanceOf(css),
  ]),
  tooltipStyles: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.instanceOf(css),
  ]),
  calendarName: PropTypes.string,
  color: PropTypes.string
}

baseCSS = theme => {
  return css`
    /**
     * Apply a natural box layout model to all elements, but allowing components to change.
     */
    html {
      box-sizing: border-box;
    }
    *, *:before, *:after {
      box-sizing: inherit;
    }

    html {
      font-family: ${_get(theme, 'fonts.base')};
    }

    pre,
    code,
    kbd,
    samp {
      font-family: ${_get(theme, 'fonts.mono')};
    }
  `;
}

MultiEvent.propTypes = {
  name: PropTypes.string.isRequired,
  startTime: PropTypes.instanceOf(moment).isRequired,
  endTime: PropTypes.instanceOf(moment).isRequired,
  length: PropTypes.number,
  description: PropTypes.string,
  location: PropTypes.string,
  calendarName: PropTypes.string,

  tooltipStyles: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.instanceOf(css),
  ]),
  multiEventStyles: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.instanceOf(css),
  ]),
  color: PropTypes.string,
  arrowLeft: PropTypes.bool,
  arrowRight: PropTypes.bool,
}

MiniSponsor = styled((props) => (
  <Tippy content={props.alt}>
    <a
      css={css`
        display: block;
      `}
      href={props.href}
      target="_blank"
      className={props.className}
      rel="noopener noreferrer"
    >
      <img src={props.src} alt={props.alt} width="40" height="40" />
    </a>
  </Tippy>
))`
  opacity: 0.2;
  transition: opacity 0.2s ease-in-out;
  &:hover {
    opacity: 1;
  }
  img {
    height: 40px;
    margin: 10px;
  }
`

HomePageStyle = css`
  h1 {
    font-size: 5rem;
    font-weight: 600;
    text-align: center;
  }
`

getPopperArrowStyle = ({
  arrowSize,
}) => {
  const arrowPos = `calc(${arrowSize} / 2 * -1)`;

  return css`
    [data-arrow-style] {
      &,
      &::before {
        position: absolute;
        width: ${arrowSize};
        height: ${arrowSize};
        background: inherit;
      }
    }

    [data-arrow-style]::before {
      content: '';
      transform: rotate(45deg);
      background: inherit;
    }

    &[data-popper-placement^="top"] [data-arrow-style] {
      bottom: 0;
      &::before {
        bottom: ${arrowPos};
      }
    }

    &[data-popper-placement^="bottom"] [data-arrow-style] {
      top: 0;
      &::before {
        top: ${arrowPos};
      }
    }

    &[data-popper-placement^="right"] [data-arrow-style] {
      left: 0;
      &::before {
        left: ${arrowPos};
      }
    }

    &[data-popper-placement^="left"] [data-arrow-style] {
      right: 0;
      &::before {
        right: ${arrowPos};
      }
    }
  `;
}

iconStyle = (color) => css`
  width: 2rem;
  height: 2rem;
  stroke: ${color};
`

globalStyles = theme => css([
  normalizeCSS(theme),
  baseCSS(theme),
])

HomePage = () => {
  return (
    <div css={[HomePageStyle]}>
      <h1 className="title">Hello React!</h1>
    </div>
  );
}

iconCommonCss = css`
  vertical-align: middle;
  padding-top: 2px;
  padding-left: 6px;
`

override = css`
  display: block;
  margin: 0 auto;
  border-color: red;
`