背景知识

小程序基于 Shadow DOM 来实现自定义组件，所以 MUI 使用与之配套的 CSS 变量 来实现定制主题

样式变量

@text-color: #323233;
@border-color: #ebedf0;
@active-color: #f2f3f5;
@background-color: #f8f8f8;
@background-color-light: #fafafa;

定制方法

定制全局主题样式

在 app.wxss 中，写入 CSS 变量，即可对全局生效

page {
  --button-border-radius: 10px;
  --button-default-color: #f2f3f5;
  --toast-max-width: 100px;
  --toast-background-color: pink;
}

定制多个组件的主题样式

与单个组件的定制方式类似，只需用一个 container 节点包裹住需要定制的组件，并将 CSS 变量 设置在 container 节点上

<view class="container">
  <mx-button bind:click="onClick">
    默认按钮
  </mx-button>

  <mx-toast id="mx-toast" />
</view>

.container {
  --button-border-radius: 10px;
  --button-default-color: #f2f3f5;
  --toast-max-width: 100px;
  --toast-background-color: pink;
}

定制单个组件的主题样式

在 wxss 中为组件设置 CSS 变量

<mx-button class="my-button">
  默认按钮
</mx-button>

.my-button {
  --button-border-radius: 10px;
  --button-default-color: #f2f3f5;
}

或通过 style 属性来设置 CSS 变量，这使你能够轻松实现主题的动态切换

<mx-button class="my-button">
  默认按钮
</mx-button>

Page({
  data: {
    buttonStyle: `
      --button-border-radius: 10px;
      --button-default-color: green;
    `,
  },

  onLoad() {
    setTimeout(() => {
      this.setData({
        buttonStyle: `
          --button-border-radius: 2px;
          --button-default-color: pink;
        `,
      });
    }, 2000);
  },
});