Vue3 Vite项目中如何修改BalmUI Dialog的宽度？

方案1：全局变量配置（推荐） #

BalmUI基于Material Design，建议在项目全局SCSS配置中前置覆盖变量，确保样式优先级正确：

1. 在项目src/styles目录下创建（或修改）variables.scss文件，写入：

@use '@material/dialog' with (
  $max-width: 1560px,
  $min-width: 280px
);
// 导入BalmUI核心样式，让变量生效
@use 'balm-ui/dist/balm-ui.scss';

2. 在vite.config.js中配置全局注入该SCSS文件：

export default {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/variables.scss" as *;`
      }
    }
  }
}

方案2：单页面深度选择器覆盖 #

如果仅需在单个页面修改，利用Vue的深度选择器穿透组件样式作用域：

<style lang="scss">
:deep(.mdc-dialog__surface) {
  max-width: 1560px;
  min-width: 280px;
  // 若优先级不足，可追加!important：max-width: 1560px !important;
}
</style>

原方法失效原因 #

• 单页面单独导入@material/dialog变量，无法影响BalmUI已编译完成的组件样式，变量覆盖必须在BalmUI样式导入前执行
• 未考虑样式权重问题，组件自带的默认样式优先级高于你单独设置的变量

内容的提问来源于stack exchange，提问作者Meaulnes