Skip to content

fix(dialog): restrict header icon style to direct children #2203

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from

Conversation

baozjj
Copy link
Contributor

@baozjj baozjj commented Jul 8, 2025

🤔 这个 PR 的性质是?

  • 日常 bug 修复
  • 新特性提交
  • 文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • CI/CD 改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他

🔗 相关 Issue

N/A(样式问题,未记录 Issue,可视为内部样式修复)


💡 需求背景和解决方案

当前 <t-dialog>.t-dialog__header 中,样式选择器:

.t-dialog__header .t-icon:not(.t-icon-close)

作用范围过大,会影响 header 插槽中用户自定义组件(如 <t-breadcrumb><t-button>)内的 .t-icon,造成图标尺寸和样式异常。

✅ 修改方案

将选择器修改为仅匹配 直系子元素

.t-dialog__header-content > .t-icon

🎯 修改效果

  • ✅ 保留 header 前缀 icon 的样式不变;
  • ✅ 避免误伤插槽嵌套结构中组件的图标;
  • ⚠️ 属于轻微破坏性更改:如果用户依赖 .t-dialog__header 中深层 .t-icon 被放大的副作用(少见),此改动会使其恢复正常。

效果截图对比(前 / 后)

❌ 修改前(嵌套组件 icon 被误伤)

image

✅ 修改后(嵌套组件样式恢复正常)

image

✅ header 中直系 icon 样式仍保留(视觉不变)

image

⚠️ 会对文档中的 "自定义 icon" demo 产生影响

image

📝 更新日志

  • fix(dialog): 限制 header icon 样式为直系子元素,避免误伤插槽嵌套组件的图标

  • 本条 PR 不需要纳入 Changelog


☑️ 请求合并前的自查清单

⚠️ 请自检并勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供

@baozjj
Copy link
Contributor Author

baozjj commented Jul 8, 2025

这样子改好像也不太妥当,会对之前的代码效果产生影响,有更好的方案嘛🤔

@tdesign-bot
Copy link
Collaborator

tdesign-bot commented Jul 8, 2025

TDesign Component Repositories CI Test Open

Component Lint Test Build Preview
tdesign-vue 👀
tdesign-vue-next 👀
tdesign-react 👀
tdesign-web-components 👀
tdesign-mobile-vue 👀
tdesign-mobile-react 👀

@uyarn
Copy link
Collaborator

uyarn commented Jul 9, 2025

这样子改好像也不太妥当,会对之前的代码效果产生影响,有更好的方案嘛🤔

是个 tradeoff 的问题 之前的效果可能会对demo的场景更方便 但是范围过大污染了其他场景,改动后要实现demo的场景又需要增加额外的代码

@baozjj
Copy link
Contributor Author

baozjj commented Jul 9, 2025

这样子改好像也不太妥当,会对之前的代码效果产生影响,有更好的方案嘛🤔

是个 tradeoff 的问题 之前的效果可能会对demo的场景更方便 但是范围过大污染了其他场景,改动后要实现demo的场景又需要增加额外的代码

确实,但这是一个值得优化的问题,目前只能通过这种方式避免:
.....
<template #header>

设置 个人信息
..... .dialog-header-patch ::v-deep(.t-icon) { font-size: inherit; }

@baozjj
Copy link
Contributor Author

baozjj commented Jul 9, 2025

这样子改好像也不太妥当,会对之前的代码效果产生影响,有更好的方案嘛🤔

是个 tradeoff 的问题 之前的效果可能会对demo的场景更方便 但是范围过大污染了其他场景,改动后要实现demo的场景又需要增加额外的代码

确实,但这是一个值得优化的问题,目前只能通过这种方式避免: ..... <template #header>

设置 个人信息
..... .dialog-header-patch ::v-deep(.t-icon) { font-size: inherit; }

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants