5.3 theme：主题渲染

theme主题色是对按钮自身的一种修饰，也就要用“修改器”生成不同主题的classname类名。UI组件库设计稿中有5种主题类型，可分别定义：default、primary、success、warning、danger，因此可使用命名空间useNamespace函数中的m方法生成相对应的classname类名：a-button--default、a-button--primary、a-button--success、a-button--warning、a-button--error，通过CSS组合的方式对主题色覆盖便可，如代码清单所示。

> packages/theme/src/button.scss
// 默认
.a-button--default {
  background-color: #fff;
  border-color: #e3e5f1;
  color: #4d5059;
  &:hover {
    background-color: #f5f6fa;
  }
}
// 主要
.a-button--primary {
  background-color: #3069ff;
  border-color: #3069ff;
  color: #fff;
  &:hover {
    background-color: #6e96ff;
    border-color: #6e96ff;
  }
}
// 成功
.a-button--success {
  background-color: #14cd70;
  border-color: #14cd70;
  color: #fff;
  &:hover {
    background-color: #5adc9b;
    border-color: #5adc9b;
  }
}
// 警告
.a-button--warning {
  background-color: #ffa81a;
  border-color: #ffa81a;
  color: #fff;
  &:hover {
    background-color: #ffc25e;
    border-color: #ffc25e;
  }
}
// 错误
.a-button--error {
  background-color: #ff4a5b;
  border-color: #ff4a5b;
  color: #fff;
  &:hover {
    background-color: #ff808c;
    border-color: #ff808c;
  }
}

4.3.2节中我们调用了useNamespace函数的m方法传入参数“primary”，生成了classname类名a-button--primary。button.scss文件定义了与类名a-button--primary相对应的主题色，此时渲染出来的按钮效果是蓝色的，如图所示。

此时回到button组件，将ns.m修改器的值更改为“success”，便会看到“绿色”的按钮，如代码清单library-05-5所示，渲染如图5-4所示。

> packages/components/button/src/index.vue
<template>
    <button :class="[ns.b(), ns.m('success')]">
        <span>成功</span>
    </button>
</template>

通过ns.m修改器的配置可以很方便的生成不同主题色的按钮，因此可以在button组件提供指定的属性更新ns.m修改器的值，让用户根据指定的属性从外部传入指定的值，便能得到不同主题的按钮，如代码清单所示。

<template>
  <button :class="[ns.b(), ns.m(type)]">
    <span><slot v-if="$slots.default" /></span>
  </button>
</template>
<script>export default { name: "a-button" };</script>
<script setup>
import { useNamespace } from '@ui-library/hook';
const ns = useNamespace("button");
/** props */
defineProps({
  type: {
    type: String,
    default: "default",
  },
});
</script>

> examples\src\App.vue
<template>
  <a-button>默认</a-button>
  <a-button type="primary">主要</a-button>
  <a-button type="success">成功</a-button>
  <a-button type="warning">警告</a-button>
  <a-button type="error">错误</a-button>
</template>

button组件中在defineProps对象定义type属性（第10-15行），将type属性绑定到ns.m方法（第2行），按钮的文本依然是从外部传，可采用“默认插槽”slot的方式定义（第3行）。最后便是在examples演示包中调用按钮，使用type属性传入不同的类型以及文本（第18~22行），渲染效果如图所示。