卡片下的header-style无效

[Glamours]

• I'm sure this does not appear in the issue list of the repository

Basic Info

• Package Name And Version: @arco-design/[email protected]
• Browser: chrome128.0.0.0

What is expected?

:header-style自定义样式应对arco-card-header-title这个class生效

Steps to reproduce

无论是放置在a-card或a-card-grid里都对自定义标题区里的样式无法控制

[oljc]

@Glamours headerStyle 设计之初是为了控制整个标题的，有特殊样式需求可以通过标题插槽自定义，或 css 样式覆盖。

[Glamours]

@Glamours headerStyle 设计之初是为了控制整个标题的，有特殊样式需求可以通过标题插槽自定义，或 css 样式覆盖。

问题是放哪它都不生效，就下面这个官方示例，改变标题字号36px，毫无作用

<a-card :style="{ width: '360px' }" title="Arco Card" :header-style="{ 'font-size': '36px' }"> <template #extra> <a-link>More</a-link> </template> ByteDance's core product, Toutiao ("Headlines"), is a content platform in China and around the world. Toutiao started out as a news recommendation engine and gradually evolved into a platform delivering content in various formats. </a-card>

[lin-97]

@Glamours headerStyle 设计之初是为了控制整个标题的，有特殊样式需求可以通过标题插槽自定义，或 css 样式覆盖。

问题是放哪它都不生效，就下面这个官方示例，改变标题字号36px，毫无作用

<a-card :style="{ width: '360px' }" title="Arco Card" :header-style="{ 'font-size': '36px' }"> <template #extra> <a-link>More</a-link> </template> ByteDance's core product, Toutiao ("Headlines"), is a content platform in China and around the world. Toutiao started out as a news recommendation engine and gradually evolved into a platform delivering content in various formats. </a-card>

一看你就不是前端，header-style 又不是 title-style， 它是针对整个头部的，而不是标题，你要么用插槽，要么css穿透吧，而且有一点就是，卡片的标题字体大小一般全局统一的，要么你就全局改

[Glamours]

@Glamours headerStyle 设计之初是为了控制整个标题的，有特殊样式需求可以通过标题插槽自定义，或 css 样式覆盖。

问题是放哪它都不生效，就下面这个官方示例，改变标题字号36px，毫无作用
<a-card :style="{ width: '360px' }" title="Arco Card" :header-style="{ 'font-size': '36px' }"> <template #extra> <a-link>More</a-link> </template> ByteDance's core product, Toutiao ("Headlines"), is a content platform in China and around the world. Toutiao started out as a news recommendation engine and gradually evolved into a platform delivering content in various formats. </a-card>

一看你就不是前端，header-style 又不是 title-style， 它是针对整个头部的，而不是标题，你要么用插槽，要么css穿透吧，而且有一点就是，卡片的标题字体大小一般全局统一的，要么你就全局改

这话说的，我是不是前端我不照样会用么？官方对标题的定义描述本就有问题，为什么body-style能控制例内容区域文字大小，而header-style为什么不可以，我知道是整个头部，为什么arco-card-header-title就不吃？难道标题不属于头部？它描述都是：自定义标题区域样式，我当然可以用deep去穿透，既然api给了我就用，我对这个参数就是有疑义

[Glamours]

@Glamours headerStyle 设计之初是为了控制整个标题的，有特殊样式需求可以通过标题插槽自定义，或 css 样式覆盖。

问题是放哪它都不生效，就下面这个官方示例，改变标题字号36px，毫无作用
<a-card :style="{ width: '360px' }" title="Arco Card" :header-style="{ 'font-size': '36px' }"> <template #extra> <a-link>More</a-link> </template> ByteDance's core product, Toutiao ("Headlines"), is a content platform in China and around the world. Toutiao started out as a news recommendation engine and gradually evolved into a platform delivering content in various formats. </a-card>

一看你就不是前端，header-style 又不是 title-style， 它是针对整个头部的，而不是标题，你要么用插槽，要么css穿透吧，而且有一点就是，卡片的标题字体大小一般全局统一的，要么你就全局改

这话说的，我是不是前端我不照样会用么？官方对标题的定义描述本就有问题，为什么body-style能控制例内容区域文字大小，而header-style为什么不可以，我知道是整个头部，为什么arco-card-header-title就不吃？难道标题不属于头部？它描述都是：自定义标题区域样式，我当然可以用deep去穿透，既然api给了我就用，我对这个参数就是有疑义

F12看下css权重啊，title本来就有个字体大小，你加header的字体大小没用，权重都没到title那里，所以这个不用怪组件库

既然存在header-style，那就表示可以控制整个header，否则就失去了这个参数存在的意义，难道就只给标题右侧的more使用？自定义标题区域样式这个描述本身就宽泛，它虽然默认有title字体大小，但也从属header，自定义参数传了就应该也要覆盖这个值，否则就我上述说的这个参数可以取消了，完全没有存在的意义

[lin-97]

@Glamours headerStyle 设计之初是为了控制整个标题的，有特殊样式需求可以通过标题插槽自定义，或 css 样式覆盖。

问题是放哪它都不生效，就下面这个官方示例，改变标题字号36px，毫无作用
<a-card :style="{ width: '360px' }" title="Arco Card" :header-style="{ 'font-size': '36px' }"> <template #extra> <a-link>More</a-link> </template> ByteDance's core product, Toutiao ("Headlines"), is a content platform in China and around the world. Toutiao started out as a news recommendation engine and gradually evolved into a platform delivering content in various formats. </a-card>

一看你就不是前端，header-style 又不是 title-style， 它是针对整个头部的，而不是标题，你要么用插槽，要么css穿透吧，而且有一点就是，卡片的标题字体大小一般全局统一的，要么你就全局改

这话说的，我是不是前端我不照样会用么？官方对标题的定义描述本就有问题，为什么body-style能控制例内容区域文字大小，而header-style为什么不可以，我知道是整个头部，为什么arco-card-header-title就不吃？难道标题不属于头部？它描述都是：自定义标题区域样式，我当然可以用deep去穿透，既然api给了我就用，我对这个参数就是有疑义

F12看下css权重啊，title本来就有个字体大小，你加header的字体大小没用，权重都没到title那里，所以这个不用怪组件库

既然存在header-style，那就表示可以控制整个header，否则就失去了这个参数存在的意义，难道就只给标题右侧的more使用？自定义标题区域样式这个描述本身就宽泛，它虽然默认有title字体大小，但也从属header，自定义参数传了就应该也要覆盖这个值，否则就我上述说的这个参数可以取消了，完全没有存在的意义

组件库设计没问题，是你自己的问题 你要改标题大小
.arco-card-size-medium .arco-card-header-title { font-size: '36px' }

[Glamours]

@Glamours headerStyle 设计之初是为了控制整个标题的，有特殊样式需求可以通过标题插槽自定义，或 css 样式覆盖。

问题是放哪它都不生效，就下面这个官方示例，改变标题字号36px，毫无作用
<a-card :style="{ width: '360px' }" title="Arco Card" :header-style="{ 'font-size': '36px' }"> <template #extra> <a-link>More</a-link> </template> ByteDance's core product, Toutiao ("Headlines"), is a content platform in China and around the world. Toutiao started out as a news recommendation engine and gradually evolved into a platform delivering content in various formats. </a-card>

一看你就不是前端，header-style 又不是 title-style， 它是针对整个头部的，而不是标题，你要么用插槽，要么css穿透吧，而且有一点就是，卡片的标题字体大小一般全局统一的，要么你就全局改

这话说的，我是不是前端我不照样会用么？官方对标题的定义描述本就有问题，为什么body-style能控制例内容区域文字大小，而header-style为什么不可以，我知道是整个头部，为什么arco-card-header-title就不吃？难道标题不属于头部？它描述都是：自定义标题区域样式，我当然可以用deep去穿透，既然api给了我就用，我对这个参数就是有疑义

F12看下css权重啊，title本来就有个字体大小，你加header的字体大小没用，权重都没到title那里，所以这个不用怪组件库

既然存在header-style，那就表示可以控制整个header，否则就失去了这个参数存在的意义，难道就只给标题右侧的more使用？自定义标题区域样式这个描述本身就宽泛，它虽然默认有title字体大小，但也从属header，自定义参数传了就应该也要覆盖这个值，否则就我上述说的这个参数可以取消了，完全没有存在的意义

组件库设计没问题，是你自己的问题 你要改标题大小 .arco-card-size-medium .arco-card-header-title { font-size: '36px' }

算了，本来很小的问题不争论，并不是不能解决，而是我提出对该参数提出有疑义，我仍然保留我的意见

[lin-97]

@Glamours headerStyle 设计之初是为了控制整个标题的，有特殊样式需求可以通过标题插槽自定义，或 css 样式覆盖。

问题是放哪它都不生效，就下面这个官方示例，改变标题字号36px，毫无作用
<a-card :style="{ width: '360px' }" title="Arco Card" :header-style="{ 'font-size': '36px' }"> <template #extra> <a-link>More</a-link> </template> ByteDance's core product, Toutiao ("Headlines"), is a content platform in China and around the world. Toutiao started out as a news recommendation engine and gradually evolved into a platform delivering content in various formats. </a-card>

一看你就不是前端，header-style 又不是 title-style， 它是针对整个头部的，而不是标题，你要么用插槽，要么css穿透吧，而且有一点就是，卡片的标题字体大小一般全局统一的，要么你就全局改

这话说的，我是不是前端我不照样会用么？官方对标题的定义描述本就有问题，为什么body-style能控制例内容区域文字大小，而header-style为什么不可以，我知道是整个头部，为什么arco-card-header-title就不吃？难道标题不属于头部？它描述都是：自定义标题区域样式，我当然可以用deep去穿透，既然api给了我就用，我对这个参数就是有疑义

F12看下css权重啊，title本来就有个字体大小，你加header的字体大小没用，权重都没到title那里，所以这个不用怪组件库

既然存在header-style，那就表示可以控制整个header，否则就失去了这个参数存在的意义，难道就只给标题右侧的more使用？自定义标题区域样式这个描述本身就宽泛，它虽然默认有title字体大小，但也从属header，自定义参数传了就应该也要覆盖这个值，否则就我上述说的这个参数可以取消了，完全没有存在的意义

组件库设计没问题，是你自己的问题 你要改标题大小 .arco-card-size-medium .arco-card-header-title { font-size: '36px' }

算了，本来很小的问题不争论，并不是不能解决，而是我提出对该参数提出有疑义，我仍然保留我的意见

header-style有header-style的作用，比如修改头部的背景颜色，或者隐藏卡片头部等header-style=“{display: 'none'}”,而不是用来给你修改标题字体大小的，element的el-card都没有header-style给你用，而且标题：卡片下的header-style无效，你这个标题说得就有问题，本来没问题被你说的有问题，但凡你f12看看css的权重，也不会这么问