Inline Styles with Objects

Vue:style

<script setup lang="ts">
const avatarStyles = {
  width: '64px',
  height: '64px',
}
</script>

<template>
  <img
    src="avatar.jpg"
    alt="Profile avatar"
    :style="avatarStyles"
  />
</template>

It uses the :style binding to bind a style object to the avatar.

Vue docs

Reactstyle

function ProfileAvatar() {
  const avatarStyles = {
    width: '64px',
    height: '64px',
  }

  return (
    <img
      src="avatar.jpg"
      alt="Profile avatar"
      style={avatarStyles}
    />
  )
}

It passes a style object to the avatar style prop.

React docs

Angular[style]

import { Component } from '@angular/core'

@Component({
  selector: 'app-profile-avatar',
  standalone: true,
  template: `
    <img
      src="avatar.jpg"
      alt="Profile avatar"
      [style]="avatarStyles"
    />
  `,
})
export class ProfileAvatarComponent {
  avatarStyles = {
    width: '64px',
    height: '64px',
  }
}

It uses the [style] binding to bind a style object to the avatar.

Angular docs