import CodeRender from '../../../components/CodeRender'

# 扩展组件尺寸形状样式

## 介绍

要想针对每个组件行为尺寸形状样式做一些修改，这里就必须使用到 `components` 配置项：

比如我们要给 `button` 添加 `4` 个尺寸 `xl`,`2xl`,`3xl`,`4xl`

我们可以使用下列的写法（推荐直接使用 Css 字符串或一个函数返回字符串）

```js filename="icestack.config.cjs"
/**
 * @type {import('@icestack/ui').Config}
 */
const config = {
  outdir: './my-ui',
  components: {
    // component name
    button: {
      extend: {
        //utils
        utils: [
          // Sizes
          //xl and 2xl
          `.btn-xl {
             @apply min-h-20 h-20 px-8;
             font-size: 1.25rem;
           }
           .btn-2xl {
             @apply min-h-24 h-24 px-10;
             font-size: 1.5rem;
           }
           `,
          // 3xl 4xl
          ({ selector }) => {
            return `
             ${selector}-3xl{
              @apply min-h-28 h-28 px-12;
              font-size: 1.75rem;
             }
               ${selector}-4xl {
                 @apply min-h-32 h-32 px-14;
                 font-size: 2rem;
               }`
          }
        ]
      }
    }
  }
}
module.exports = config
```

### 生成结果

<CodeRender className='space-y-2' code={`
<div class="flex space-x-2 items-center">
<span>Extends</span>

<button class="btn btn-4xl">4xl</button>
<button class="btn btn-3xl">3xl</button>
<button class="btn btn-2xl">2xl</button>
<button class="btn btn-xl">xl</button>
</div>
<div class="flex space-x-2 items-center">
<span>Default</span>

<button class="btn btn-lg">Large</button>
<button class="btn btn-md">Normal</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-xs">Tiny</button>
</div>
`}></CodeRender>

```html
<button class="btn btn-4xl">4xl</button>
<button class="btn btn-3xl">3xl</button>
<button class="btn btn-2xl">2xl</button>
<button class="btn btn-xl">xl</button>
<button class="btn btn-lg">Large</button>
<button class="btn btn-md">Normal</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-xs">Tiny</button>
```

### Examples

https://github.com/sonofmagic/icestack/blob/main/website/icestack/components/button.js
