prefixCls 支持自定义 about dialog HOT 23 CLOSED

自定义 prefix 本身的适用性不广，可能加了后只有你自己能用到。

from dialog.

没太明白什么意思

from dialog.

我有项目依赖了Rc-Dialog 采用了BEM组件布局
eg：

其中需要对 Rc-Dialog部分样式需要重写
eg：

如上 也需要遵循 BEM布局

`
&__mask {

    &--hidden {
    }

}

&__wrap {

}

&__content {
}

&__header {
}

`
目标是将 ’-‘ 作为props传进去，比如 modifier：’-‘ | ’__' | '--'

from dialog.

没太明白什么意思

我下面举例子了。

哈哈 我上个antd的pr似乎也是你review的 谢谢及时回复

from dialog.

覆盖不了className吗？

from dialog.

目前看来，要么你BEM的样式额外加一个-链接的来兼容，要么PR改掉所有需要支持直接传入className的地方

from dialog.

覆盖不了className吗？

classname覆盖只支持wrapper层的
Dialog组件的基本结构 mask wrap content header 不支持重写classname

from dialog.

层级覆盖一下呢？
.wrapper .xxxx-body {
}

from dialog.

目前看来，要么你BEM的样式额外加一个-链接的来兼容，要么PR改掉所有需要支持直接传入className的地方

• BEM的样式额外加一个-链接的来兼容目前是这么做的；层级覆盖可行，违背了BEM初衷

• PR改掉所有需要支持直接传入className的地方

  有个地方要探讨下，两种方案

  • newPrefixCls = （prefixCls + 连接符 ）eg：${perfixCls-body} 将 ${perfixCls}-作为默认prefix
  • 支持className覆盖 会对一些相对比较稳定的结构进行classname覆盖。
  • 将连字符作为props blockElement元素能控制 对于一些modifierElement 控制不到。
    eg：
    两个连字符：
    

  `${prefixCls}__mask--hidden`
   `&__mask {
  
        &--hidden {
        }
  
   }` 
  

from dialog.

直接将连字符作为props更不合理。需要多次切断 className的拼接；改不彻底

from dialog.

你理想的情况认为dialog应该怎样改？

from dialog.

依赖了 rc-dialog 后，如果要覆盖组件的样式，肯定就需要按照 rc-dialog 自己的类名来覆盖，而不是让第三方组件去适应业务的命名规则。

自己的业务使用 BEM 规范这是没有问题的，没有必要为了符合BEM规范让第三方组件去做这些修改。

如果你还使用了其他的UI组件库，它们肯定也会存在一些内部类名命名，如果你想覆盖样式，不可能让它们也作出修改。

from dialog.

依赖了 rc-dialog 后，如果要覆盖组件的样式，肯定就需要按照 rc-dialog 自己的类名来覆盖，而不是让第三方组件去适应业务的命名规则。

自己的业务使用 BEM 规范这是没有问题的，没有必要为了符合BEM规范去做这些修改。

如果你还使用了其他的UI组件库，它们肯定也会存在一些内部类名命名，如果你想覆盖样式，不可能让它们也作出修改。

可是有些css命名不希望用前缀 '-' 来分隔 也只能覆盖么。‘-’能不能做个默认的。交给用户去自定义这个连接。

from dialog.

你理想的情况认为dialog应该怎样改？

采用第二种方案/第一种方案

from dialog.

@afc163
我上面只是举例子

假设我就是有个诉求 支持自定义 prefix 块级元素前缀

from dialog.

像 header、title、content 这些部分的类名，本来就没有提供对应的 API 去自定义类名覆盖样式。

所以你要的 API 应该是自定义 header、title、content 这些部分的 className。

from dialog.

@afc163
我更倾向于自定义 prefix；你说的这种可以作为替代方案。如果确定方案。我就着手补充单测提pr了。

from dialog.

你艾特错人了😂

from dialog.

自定义 prefix 本身的适用性不广，可能加了后只有你自己能用到。

那我能提pr么 我觉得我这个确实是个场景

from dialog.

可以，支持 header、title、content 这些部分自定义类名即可，不需要自定义 prefixCls

from dialog.

可以，支持 header、title、content 这些部分自定义类名即可，不需要自定义 prefixCls

thax, i will prefix

from dialog.

可以，支持 header、title、content 这些部分自定义类名即可，不需要自定义 prefixCls

header title content
推荐哪种方案？

• 单独命名 headerClassName titleclassName 比较好

• classNames: { headerClassName, titleClassName, contentClassName }

from dialog.

单独命名就行，不用合在一起，本身还有 className

from dialog.