style:__

Several ways to set inline styles on an element. Each form can be a plain value or a function/signal. To remove a style, set its value to null, undefined, or false. Object keys are CSS property names, so they are kebab-case ('flex-direction', not flexDirection).

Forms

form	what it does
style:color="red"	namespace form — sets a single property (supports custom properties too: style:--brand="red")
style="color:red"	string form — assigned to style.cssText, replacing any existing inline style
style={{ color: 'red' }}	object form — each key becomes a single property set via style.setProperty
style="color:var(--color)"	strings can reference CSS custom properties
style:my-ns={{ color: 'red' }}	nested object form — identical to the object form above; the my-ns part is ignored at runtime

Object form caveat

When you swap the object on a style={...} binding, properties that were on the previous object but not on the new one are not removed. Clear them explicitly by setting the value to null.

Examples

Every style form

String, object, and namespaced forms side by side — including a multi-property object with kebab-case keys.

import { render } from 'pota'

function App() {
	return (
		<main>
			<div style="color:red">cssText string</div>
			<div style="color:blue;padding:4px">cssText + padding</div>
			<div style={{ color: 'orange' }}>object</div>
			<div
				style={{
					color: 'orange',
					'border-left': '1px solid grey',
					padding: '3px',
				}}
			>
				object with kebab-case keys
			</div>
			<div style:color="green">namespaced single property</div>
		</main>
	)
}

render(App)

Reactive color from a signal

A style bound to a signal reader updates live. Pass the reader (color.read), not a snapshot — the binding re-runs when the signal changes.

import { render, signal } from 'pota'

function App() {
	const color = signal('red')
	const colors = ['red', 'green', 'blue']

	return (
		<main>
			<div style:color={color.read}>{color.read}</div>
			<div style={() => `color:${color.read()}`}>
				cssText + signal
			</div>
			<button
				on:click={() =>
					color.update(
						c => colors[(colors.indexOf(c) + 1) % colors.length],
					)
				}
			>
				next color
			</button>
		</main>
	)
}

render(App)