Class and Style Bindings

Binding HTML Classes

Vue

<template>
  <div
    class="static"
    :class="{
      active: isActive,
      'text-danger': hasError,
    }"
  >
    Text
  </div>
</template>

Svelte

<div
  class="static"
  class:active={isActive}
  class:text-danger={hasError}
>
  Text
</div>

React

import clsx from 'clsx';

export function App() {
  return (
    <>
      <div
        class={clsx('static', {
          active: isActive,
          'text-danger': hasError,
        })}
      >
        Text
      </div>
    </>
  );
}

Binding Inline Styles

Vue

<div :style="{ color: dangerColor }">Text</div>

Svelte

<div style:color={dangerColor}>Text</div>

React

<div style={{ color: dangerColor }}>Text</div>