index 页面

pages/index/index.wxml:

<material-button>
  text
</material-button>

pages/index/index.scss:

material-button {
  display: block;
  border: 1px solid black;
}

MaterialButton 自定义组件

component/MaterialButton/index.wxml:

<button class="material-button">
  <slot />
</button>

component/MaterialButton/index.scss:

button.material-button {
  width: 100%;
}

// button { width: 100%; } // 无效
// .material-button { width: 100%; } // 无效

在component/MaterialButton/index.scss中，通过button.material-button可以设置按钮宽度为100%，单独通过button或者.material-button不可以。但是在开发工具中可以看到按钮宽度为100%。