@ray-js/smart-ui Tab 标签页，不够自由灵活

[18559697016]

https://developer.tuya.com/material/smartui?comId=tab

@ray-js/smart-ui Tab 标签页，不够自由灵活

1.Tab的margin被写死在代码里面（请看下图）
2.Tab Item样式也是写死，实现胶囊效果，还需要特殊手段才能实现（你们官网都是有胶囊效果的，现在这个胶囊效果很常用）
3.Tab Content样式也是，想实现圆角效果，都要特殊手段才能实现

[lshinylee]

我们逐一分析哈，首先可以先了解下 https://developer.mozilla.org/zh-CN/doc ... properties：

• Tab的 margin 被写死在代码里面：可参考附件图，我们可以通过自定义 CSS 变量来覆盖默认样式。例如，tab 组件的边距或圆角使用了 --padding-md 等 CSS 变量。因此，你可以在业务中通过定义这些变量来覆盖默认样式，如下代码所示：

Code: Select all

.smart-tabs {
  --tabs-card-border-radius: 24px;
  --padding-md: 12px;
}

• Tab Item样式也是写死：同样，你可以通过元素检查器查看对应的 CSS 变量，并自行复写这些变量来实现自定义样式。需要注意的是，官网和当前组件之间存在差异是因为 PC 端和移动端的设计规范和交互并不完全一致。此外，不同技术栈也会导致样式的差异。通常来说，组件的自定义样式较多，在保留逻辑的情况下，允许各个业务自行去覆盖样式是常见的做法，因为默认样式无法满足所有场景。

• Tab Content样式也是，想实现圆角效果，都要特殊手段才能实现：同样可以通过 CSS 变量来实现，如果你目前使用了特殊手段来实现圆角效果，可以分享一下具体的实现方式，我们可以进一步优化。例如，你可能使用了某些 JavaScript 或者额外的 CSS 规则来实现这些效果，了解具体实现后，我们可以提供更合适的优化方案。

[18559697016]

上面 说的 “需要特殊手段”,就是你上面说的------自定义 CSS 变量来覆盖默认样式，
这样不是有点麻烦么，是不是可以把样式传参的形式出来，以方便使用者，组件封装出来的目的也是提供更好的体验，方便使用者的吧 哈哈哈

[lshinylee]

样式通过 props 传参是可行的，但我们发现存在以下几个问题：

1. 复杂性增加：UI 组件的可定制样式往往种类繁多，如果全部通过 props 导出，会大幅增加 props 的数量，导致组件接口复杂化，不利于维护和理解。
2. 性能问题：通过 xxxStyle 传参，类似 CSS in JS 的方案，虽然灵活，但在使用过多时会对性能产生一定影响，尤其是在频繁更新样式的场景中。
3. 一致性和可读性：过多样式传参可能导致代码风格不一致，降低代码的可读性和可维护性。开发者需要记住和管理大量的 props 名称，增加了出错的可能性。
4. 扩展性：随着组件功能的增加，样式需求也会不断变化和增加，通过 props 传参的方式难以灵活应对未来的扩展需求。
5. 调试难度：当样式通过大量 props 传递时，调试和跟踪问题变得更加困难，因为样式的来源可能分散在多个地方。

综上，我们暂时是不会考虑通过增加样式传参来解决此类问题。