Dynamic Styling

Since macaron compiles the styles to static stylesheets at build time, you can't generate new styles dynamically.

But you can use CSS variables to dynamically update properties. Macaron also provides APIs to hash and scope css variables to your app.

Example

Styled API

import { createVar, fallbackVar } from '@macaron-css/core';
import { styled } from '@macaron-css/solid';
const colorVar = createVar();
const Button = styled('button', {
  base: {
    color: fallbackVar(colorVar, 'red'),
    border: 'none',
  },
});
function MyButton(props) {
  return (
    <Button
      style={{
        [colorVar]: props.color,
      }}
    >
      Click me
    </Button>
  );
}

Vanilla API

import { createVar } from '@macaron-css/core';
const colorVar = createVar();
function MyButton(props) {
  return (
    <button
      class={style({
        vars: { [colorVar]: props.color },
        color: colorVar,
        border: 'none'
      })}
    >
      Click me
    </button>
  );
}