重现步骤 🕹
链接到实时示例： https://codesandbox.io/s/laughing-dubinsky-fsop9l?file=/src/App.tsx
当前行为 😯
当在 MuiLink 组件上使用属性 color="inherit" 时，悬停时的下划线颜色不会改变。相反，它保持与链接文本相同的颜色。
预期行为 🤔
颜色应该是不同的，或者至少是 alpha 值，因为这是其他所有颜色的行为。或者文档应该显示警告，或者关于这种行为的解决方法。
上下文 🔦
我正在使用 Alert 组件，其中有以 MuiLink 形式表示的文本链接。我必须为它硬编码颜色，使其与 Alert 文本的颜色相同。顺便说一下，我在调色板中找不到 Alert 组件内使用的文本颜色。
你的环境 🌎
环境是由官方模板提供的默认沙箱设置的环境。
3条答案
按热度按时间rdlzhqv91#
当为颜色指定特定值时，我们可以为文本装饰添加不透明度，因为我们有RGB值。但是，当使用inherit时，我们只能使用
inheritCSS值，在这种情况下，我们无法真正添加不透明度。如果颜色不是动态的，那么添加样式覆盖是实现你想要达到的效果的可行方法。2skhul332#
感谢您的更新。在这种情况下，您能否推荐一种方法来处理
Alert组件内的暗/亮模式以匹配文本？Alert组件内使用的文本颜色似乎没有在主题中暴露出来，因此我无法执行color="text.alert"或类似操作。mkh04yzy3#
我正在移除 "status: expected behavior",这不是正确的行为。如果我们无法实现期望的行为，最接近的标签将是 "external dependency"。但即使如此，这也不是真的，我们可以使用
color-mix(in srgb, currentColor, white 60%),它似乎运行良好，因为即使浏览器不识别该值(超出我们的浏览器支持范围),默认值也是 currentColor: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color#formal_definition,因此它是向后兼容的(较旧的浏览器将获得今天的用户体验)。Screen.Recording.2024-02-25.at.20.29.09.mov
对我来说，这看起来像是一个快速的胜利。