CSS Prop

The CSS prop allows you to write inline styles for your componnets that supports selectors and media queries.

It acts as a regular prop for your component, that gets defined using the cssProp helper.

<script setup lang="ts">
import { cssProp } from 'vue'
defineProps({
  css: cssProp
})
</script>
<template>
  <div>
    <slot />
  </div>
</template>

Context

The CSS props support all the syntaxes supported in the css function.

It will create a class that gets bound to the component if it is used in a parent context.

It should not have a default value, as that default value should be static CSS in your css() function.

The CSS prop will have the local tokens defined inside the component injected into it.

That means you can easily overwrite any local tokens from a parent component.

<template>
  <MyButton :css="{ '--button-primary': '{color.red.200}' }" />
</template>