Emotion Partials

April 27, 2020

Learned how to add partials to emotion styled components with props. This way you can add a bunch of css if a prop is true. Boy is React cool.

import styled from '@emotion/styled';
import { css } from '@emotion/core';

const isAchievementPartial = (props: any) =>
  props.isAchievement &&
  css`
    padding: 20px 5px 5px 5px;
    border: 2px solid rgb(36, 234, 182);
    border-radius: 11px;
    position: relative;
    overflow: hidden;

    &:before {
      content: 'Achievement';
      position: absolute;
      top: 0;
      left: 0;
      background: rgb(36, 234, 182);
      font-size: 12px;
      padding: 1px 6px;
      font-weight: bold;
    }
  `;

const Message = styled.div<any>`
  display: flex;
  margin-bottom: 10px;
  ${isAchievementPartial}
`;

<Message isAchievement={true} />