CSS Props

Pixel Vue 3 introduced CSS props to passing css properties as "props" to components.

When to use

You can use CSS props, if you want to:

• Writing style for native HTML with Pixel tag
• Add style for layouting with MpFlex

How to use

By default only MpFlex and Pixel tag that can receive CSS props

<template>
  <MpFlex
    direction="column"
    align="center"
    background="background"
    padding="12"
  >
    <Pixel.img
      src="https://cdn.mekari.design/logo/mekari/default.svg"
      height="100px"
      mb="4"
    />
    <MpText size="h1">Hello Pixel Vue 3</MpText>
  </MpFlex>
</template>

<script setup lang="ts">
  import { MpText, MpFlex, Pixel } from "@mekari/pixel3"
</script>

Tips

• CSS props receive all utility props and the shorthand, for ex: backgroundColor or bg
• CSS props receive all value from Design token, for ex: brand.mekari or red.400

Limitations

• CSS props only can write with camelCase, for ex: write backgroundColor instead of background-color

Links

• Read more about Utility props in this docs
• Read more about Design token in this docs