Update package installation instructions and fix class variant proper…

…ty prefixing

README.md

@@ -91,7 +91,7 @@ It will be rendered as:
 ```
 
 ## Getting Started
-Install the package `class-variant`, `@master/styled.react`, or `@master/styled.vue` depending on your framework:
+Install the package `npm i class-variant`, `npm i @master/styled.react`, or `npm i @master/styled.vue` depending on your framework:
 
 ### Vanilla JS
 ```js
@@ -133,25 +133,27 @@ return (
 Predefine the class variant corresponding to the property.
 ```tsx
 const Button = styled.button('flex', {
-    size: {
+    $size: {
         sm: 'font:12 size:8x',
         md: 'font:14 size:12x'
     },
-    disabled: 'opacity:.5',
+    $disabled: 'opacity:.5',
     ...
 })
 
 return (
-    <Button size="sm" disabled />
+    <Button $size="sm" disabled />
 )
 ```
 ```html
 <button class="flex font:12 size:8x opacity:.5" disabled></button>
 ```
+> ⚠️ Custom properties that are not element-owned properties must be prefixed with `$prop`, otherwise they will be reflected on the final element and an error may be thrown.
+
 You can set default properties for elements.
 ```tsx
 Button.defaultProps = {
-    size: 'md'
+    $size: 'md'
 }
 
 return (
@@ -166,11 +168,11 @@ return (
 Dynamically apply class names based on function properties.
 ```tsx
 const Element = styled.div('fg:white',
-    ({ color }) => color && `bg:${color}`
+    ({ $color }) => $color && `bg:${$color}`
 )
 
 return (
-    <Element color="blue" />
+    <Element $color="blue" />
 )
 ```
 ```html
@@ -181,13 +183,13 @@ return (
 Applies the target class name matching all specified property keys and their values.
 ```tsx
 const Button = styled.button('inline-flex',
-    ['uppercase', { intent: 'primary', size: 'md' }]
+    ['uppercase', { $intent: 'primary', $size: 'md' }]
 )
 
 return (
-    <Button intent="primary">Not matched</button>
-    <Button size="md">Not matched</button>
-    <Button intent="primary" size="md">Matched</button>
+    <Button $intent="primary">Not matched</button>
+    <Button $size="md">Not matched</button>
+    <Button $intent="primary" $size="md">Matched</button>
 )
 ```
 ```html

packages/react/e2e/ApplyBasedOnMatchingProperties.test.tsx

@@ -2,11 +2,11 @@ import { test, expect } from '@playwright/experimental-ct-react'
 import Element from './ApplyBasedOnMatchingProperties'
 
 test('element', async ({ mount }) =>
-    await expect(await mount(<Element intent="primary" size="md" />))
+    await expect(await mount(<Element $intent="primary" $size="md" />))
         .toHaveClass('inline-flex uppercase')
 )
 
 test('element without uppercase', async ({ mount }) =>
-    await expect(await mount(<Element intent="primary" />))
+    await expect(await mount(<Element $intent="primary" />))
         .not.toHaveClass('uppercase')
 )

packages/react/e2e/ApplyBasedOnMatchingProperties.tsx

@@ -1,7 +1,7 @@
 import styled from '../src';
 
 const Element = styled.button('inline-flex',
-    ['uppercase', { intent: 'primary', size: 'md' }]
+    ['uppercase', { $intent: 'primary', $size: 'md' }]
 )
 
 export default Element