taro 的项目结构_自定义 Taro UI 组件的边框样式（hairline mixin）《 电商小程序案例：页面结构 》...

在这个搜索栏组件的下面，你会发现有一条淡蓝色的边线 ... 我们可以先找到 Taro UI 里的搜索栏的样式 ..

按住 alt 键 .. 点一下 AtSearhBar 这个组件，可以打开这个组件的定义 ..

下面再找到这个组件的样式 ..

在 node_modules .. taro-ui 里面，打开 dist .. style .. components .. 找到 search-bar.scss ..

在这个样式里面，你找不到边框的样式 .. 不过你会发现这里用了一个 Mixin .. 名字是 hairline-bottom .. 它的作用就是在组件的下边添加了一个边框 ..

Taro UI 的 mixin 是在 dist .. style .. mixins 里面 .. 打开 libs .. 找到 hairline .. 这个文件里定义了一个 hairline-bottom . mixin ..

边框的颜色用的是 $color-border-light 这个变量 .. 除了这个 mixin，在这个文件里定义的其它的 mixin，都用到了这个变量的值 ..

也就是如果你想修改组件上面的边框的颜色，可以重新定义一下这个变量的值 ..

在我们的项目里，打开 src .. assets .. styles 下面的 _variable_overrides .. 找到 $color-border-light 这个变量 ..

注意它并没有直接定义一个颜色的值，这个变量的颜色值用了一个 tint 函数 .. 实际的颜色是 $color-border-base 变量定义的 ..

复制一份这个变量 .. 取消注释 ..

修改一下它的值 .. 换成一种淡灰色 .. 保存一下 .. 再打开 app.scss .. 保存一下这个文件 .. 重新编译样式以后 .. 你会发现，现在这个搜索栏下面的边框的颜色就会有一些变化 ..

这个边框的颜色实际要比 $color-border-base 定义的颜色要更浅一些 ..