传递属性

您可以向样式化组件传递属性，类似于 Vue 组件。例如，您可以向样式化的输入框传递一个占位符。

基础用法

您还可以在样式中使用属性。例如，您可以使用 borderColor 属性来更改输入框的边框颜色。

注意

如果要在样式中使用属性，则需要在 styled 函数中定义这些属性。因为 Vue 组件需要显式声明 props，以便 Vue 知道应如何处理传递给组件的外部 props（请参阅 Props Declaration）

所以我们提供了一个插件使得定义 props 与 styled-components 一样. 你可以安装插件 @vue-styled-components/plugin 以支持一下写法:

const StyledDiv = styled.div<color: string>`
  color: ${props => props.color}
`

## 使用 `attributes`

:::demo
```vue
<script setup lang="ts">
import { styled } from '@vue-styled-components/core'

const StyledInput = styled
  .input
  .attrs({ disabled: true })`
    width: 100%;
    height: 40px;
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: ${ props => props.disabled ? 'not-allowed' : 'pointer'};
  `
</script>

<template>
  <StyledInput value="Type something..." :canInput="false" />
</template>

:::

新的 props 选项

从 v1.7.0 开始，您可以使用 props 选项将属性传递给样式化的组件。