Using Emotion in a New Project: Component Inheritance vs. Single Styled Component with Props

I was creating shared (common) components using Emotion in a new project. As I was considering how best to structure things for cleanliness and scalability, I happened to watch a YouTube video about the SOLD principle. That video led me to think that developing shared components using style inheritance could be advantageous for future expansion.

So I changed all my shared components to use extension (inheritance). However, I encountered an unexpected bug in the process. Through this bug, I learned the difference between:

1. Extending (inheriting) components
2. Using props-based branching within a single styled component

And I'd like to share that experience here.

Two Ways to Handle Variations in Components

1. Using Inheritance (Extend)

1. Create a base styled component.
2. For each needed variant, extend that base component and apply different styles.
3. If you have many variants, adding new ones is straightforward since it simply involves creating more extended components.

2. Using Props-Based Branching in a Single Styled Component

1. Pass a value like variant as a prop.
2. In a single styled component, use conditionals such as switch or ternary operators to apply different styles.
3. This approach handles frequently changing props dynamically and immediately.

Simple Example Code Comparison

1. Handling Variants with Inheritance

function Button({ variant = "primary", disabled, children }: ButtonProps) {
  const Component = ButtonComponent[variant];
  return {children};
}

const StyledButtonBase = styled.button`
  /* Common styles */
`;

const PrimaryButton = styled(StyledButtonBase)`
  background-color: black;
  color: white;
`;

const DangerButton = styled(StyledButtonBase)`
  background-color: red;
  color: white;
`;

const ButtonComponent = {
  primary: PrimaryButton,
  danger: DangerButton
};

• When a new variant is added, you extend StyledButtonBase again (for example, DangerButton) and can easily keep expanding.

2. Handling Variants with Props

function Button({ variant = "primary", disabled, children }: ButtonProps) {
  return (
    
      {children}
    
  );
}

const StyledButton = styled.button`
  /* Common styles */
  background-color: ${(props) => getBackgroundColor(props)};
  color: ${(props) => getColor(props)};
`;

function getBackgroundColor({ variant, disabled, theme }: ButtonProps & { theme: Theme }) {
  switch (variant) {
    case "primary":
      return blue;
    case "danger":
      return red;
    default:
      return gray;
  }
}

function getColor({ variant, disabled, theme }: ButtonProps & { theme: Theme }) {
  switch (variant) {
    case "primary":
      return white;
    case "danger":
      return white;
    default:
      return black;
  }
}

The Problem Scenario

Let's say we have an InputContainer component that wraps an input. When the input's value changes (onChange), we perform a validation check. If there's an error, we pass variant='error' to change the border color to red.

Inheritance-Based InputContainer

function InputContainer({ variant = "default", children }: InputContainerProps) {
  const Component = InputContainerComponent[variant];
  return {children};
}

const BaseInputContainer = styled.div`
  border: 1px solid black;
`;

const ErrorInputContainer = styled(BaseInputContainer)`
  border-color: red;
`;

const InputContainerComponent = {
  default: BaseInputContainer,
  error: ErrorInputContainer,
};

Consider that a re-render takes place. What potential issue could arise here?

Props-Based InputContainer

function InputContainer({ variant = "default", children }: InputContainerProps) {
  return (
    
      {children}
    
  );
}

const StyledInputContainer = styled.div<{ variant: "default" | "error" }>`
  border: 1px solid
    ${({ theme, variant }) =>
      variant === "error" ? theme.colors.variants.negative : theme.colors.neutral.gray300};
  /* ... */
`;

What differences do you see in how the component is re-rendered?

The Bug I Encountered

I experienced a bug where the input's focus would disappear every time the border color changed.

Why Did This Happen?

In the inheritance-based approach, changing the variant creates what is effectively a new component each time. So when variant changes from "default" to "error", React sees the old component unmount and a new one mount. As a result, the original input element is removed, and a new one is created, causing the loss of focus.

What about the props-based approach?

With props, you're still dealing with the same component. Only the class or inline styles change. Because the same DOM node persists, the focus doesn't get lost when the border color changes.

Summary

Inheritance-Based InputContainer

• When the variant changes, a different component is rendered.
• React may treat it as a completely separate DOM element and re-mount it, depending on the complexity of the structure.
• If you had an input focused inside, it can lose focus due to re-mount.

Props-Based InputContainer

• When the variant changes, the same component remains; only the styling changes.
• The focused input remains intact, preserving the focus.

Conclusion & Recommendations

When Should You Use Inheritance?

• When you have many variants to extend, but not much dynamic UI change.
• For example, a Button component that has many "types" (Primary, Danger, etc.) but not frequent state changes.
• Inheritance adheres well to the Open-Closed Principle, making it easy to add new variants without modifying existing code.

When Should You Use Props-Based Branching?

• When there's a lot of user interaction and the variant or disabled states change frequently.
• For example, form inputs that can switch to an error state in real-time.
• Because the component doesn't unmount and remount, states like focus are maintained.

Final Summary

• If the UI changes frequently in real-time, use a single component and branch styles via props.
• If dynamic changes are rare but you need many variations, use inheritance.
• You can also mix both approaches: for example, separate large categories (Primary, Danger, etc.) via inheritance, then handle smaller state changes (hover, disabled) via props.

Ultimately, it's crucial to understand "when the UI changes". I hope this post helps you design shared components with Emotion more effectively!

Thank you!