Inline styles

Similarly to React, you can use js inline styles in dreamland. Here’s an example:

JS JSX

let element = html`<div style=${{ color: "red", backgroundColor: "blue" }}>Hello, world!</div>`;

let element = <div style={{ color: "red", backgroundColor: "blue" }}>Hello, world!</div>;

You can also use the use function to bind a variable to a style property:

JS JSX TSX

let state = $state({
	color: "red",
});

let element = html`<div style=${{ color: use(state.color) }}>Hello, world!</div>`;

let state = $state({
	color: "red",
});

let element = <div style={{ color: use(state.color) }}>Hello, world!</div>;

let state: {
	color: string
} = $state({
	color: "red",
});

let element: HTMLElement = <div style={{ color: use(state.color) }}>Hello, world!</div>;

If you want your css values to have more complex values use reactive strings:

JS JSX TSX

let state = $state({
	line: 0,
});

let element = html`<div style=${{ line: use`${state.line}em` }}>Hello, world!</div>`;

let state = $state({
	line: 10,
});

let element = <div style={{ top: use`${state.line}em` }}>Hello, world!</div>;

let state: {
	line: number 
} = $state({
	line: 10,
});

let element: HTMLElement = <div style={{ top: use`${state.line}em` }}>Hello, world!</div>;

This is the ideal solution for when styles change often, but is not optimal for more static css.