【小程序】关于可自定义小程序组件样式建议

[hjh156]

建议：

使用css3的变量函数 var(--) 来自定义。

以Button按钮组件为例子：
开发者如果想自定义背景色(background-color)、字体色(color)、边框(border)
现阶段是样式覆盖，经测试需要加 !important 才能覆盖以上样式，个人感觉写法有点不爽
如果使用css3的变量函数 var(--) ，按照以下写法，个人感觉合理，希望能被采纳

组件内部写法 ：

.t-button{
    color: var(--color , #000000e6);
    background-color: var(--background-color , #fff);
    border: var(--border , 1px solid #dcdcdc);
}

组件外部自定义时:

.my-button{
    --color : red;
    --background-color : blue
    --border : solid 5px yellow
}

[LeeJim]

确实可以的，目前其他端已经使用了 CSS variables ，后续小程序也会采用这种方案。

如果有兴趣的话，可以一起参与改造～

[vhxubo]

在组件自定义样式中定义变量, 确实是一个很新奇的想法, 避免了写 !important

我的想法是将 Less 变量声明全部使用上 var, 方便 app 或者 page 内全局替换, 而不仅仅使用 var 修改一个特定组件

不足之处请见谅!

起因

尝试将 Less 变量中的详细数值, 独立到 page(相当与网页的 :root) 中的 var 变量

• 在 page 下的 wxss 修改 var, 会影响该页面使用到指定 var 的全部组件样式, 以实现风格统一
• 在 app.wxss 中修改 var , 影响全局主题样式

page 下的 wxss 权重大于 app.wxss

// 旧的变量声明
// 基础颜色
@primary-color: #0052D9; // 色彩-品牌-可操作
@success-color: #00A870; // 色彩-功能-成功
@warning-color: #ED7B2F; // 色彩-功能-警告
@error-color: #E34D59; // 色彩-功能-失败

// ------------------------------------------

// 新的变量声明
page {
  --primary-color: #0052d9; // 色彩-品牌-可操作
  --success-color: #00a870; // 色彩-功能-成功
  --warning-color: #ed7b2f; // 色彩-功能-警告
  --error-color: #e34d59; // 色彩-功能-失败
}

// Less 变量定义时, 使用 CSS var
@primary-color: var(--primary-color, #0052d9); // 色彩-品牌-可操作
@success-color: var(--success-color, #00a870); // 色彩-功能-成功
@warning-color: var(--warning-color, #ed7b2f); // 色彩-功能-警告
@error-color: var(--error-color, #e34d59); // 色彩-功能-失败

相关思路模拟

完整代码及预览 https://codepen.io/vhxubo/pen/yLzRoGm?editors=1100

// 因为没有测试过组件库 Less 与 page 页面的样式权重
// 如有问题, 请见谅, 以下主要展示相关思路
// ------------------------------------------

// 模拟小程序中对应的 page
page {
  --primary-color: #0052d9; // 色彩-品牌-可操作
  --success-color: #00a870; // 色彩-功能-成功
  --warning-color: #ed7b2f; // 色彩-功能-警告
  --error-color: #e34d59; // 色彩-功能-失败
  --bg-color: #f0f2f5; // 色彩-背景
}

// Less 变量定义时, 使用 CSS var
@primary-color: var(--primary-color, #0052d9); // 色彩-品牌-可操作
@success-color: var(--success-color, #00a870); // 色彩-功能-成功
@warning-color: var(--warning-color, #ed7b2f); // 色彩-功能-警告
@error-color: var(--error-color, #e34d59); // 色彩-功能-失败
// 背景色
@bg-color: var(--bg-color, #f0f2f5); // 色彩-背景

// 在此直接修改样式
// 在 page 下的 wxss 修改, 会修改该页面组件的样式
// 在 app.wxss 中修改, 影响全局主题样式
// page 下的 wxss 权重大于 app.wxss
page {
  --primary-color: #f36d78;
  --bg-color: #f1f3ff;
}

.t-button {
  color: @primary-color;
  background-color: @bg-color;
}

编译后的代码

page {
  --primary-color: #0052d9;
  --success-color: #00a870;
  --warning-color: #ed7b2f;
  --error-color: #e34d59;
  --bg-color: #f0f2f5;
}
page {
  --primary-color: #f36d78;
  --bg-color: #f1f3ff;
}
.t-button {
  color: var(--primary-color, #0052d9);
  background-color: var(--bg-color, #f0f2f5);
}