emotion-injector

Emotion is required.

Concept

There are situations when you want to influence the style of an existing component from the outside when using Emotion. In this case, the style array should be mainly used. At this time, the reference (ex. "css={[style1, style2]"}) of the array is continuously generated and re-rendered.

Freely merge Emotion Styles and optimize rendering performance with emotion-injector.

Setup

npm install emotion-injector

# or

yarn add emotion-injector

Usage

Support Typescript

interface Props extends InjectableStyle {
  // extends -> css?: SerializedStyles (emotion/core)
}

useCombineStyles

import React from "react";
import { useCombineStyles } from "emotion-injector";

import * as styles from "./Button.style";

function Component({ css, name }) {
  const combinedStyle = useCombineStyles(styles.container, css);

  return <div css={combinedStyle}>{name}</div>;
}

useConditionalStyle

import React from "react";
import { useCombineStyles } from "emotion-injector";

import * as styles from "./Button.style";

function Component({ name, active, shape }) {
  const conditionalStyles = useConditionalStyles(
    styles.container, // or null
    {
      condition: active,
      style: styles.active,
    },
    {
      condition: shape === "base",
      style: styles.baseShape,
    },
    {
      condition: shape === "outline",
      style: styles.outlineShape,
    }
  );

  return <div css={combinedStyle}>{name}</div>;
}