如何增大clr-dg-action-overflow高度？设置.action-item类是否会影响其他组件？

调整clr-dg-action-overflow条目高度的方法 #

1. 仅设置.action-item高度是不够的 #

Clarity的clr-dg-action-overflow下拉菜单条目默认高度由line-height、上下内边距共同决定，只给.action-item加高度属性会出现文字垂直位置不对、内容溢出或者空白区域错位的问题。

2. 正确的CSS配置 #

你需要限定样式仅作用于datagrid的溢出操作菜单，避免影响其他组件，示例代码如下：

/* 仅选中datagrid溢出菜单下的操作项，不会污染其他组件样式 */
clr-dg-action-overflow .action-item {
  line-height: 48px; /* 按需调整数值，控制文字垂直居中 */
  padding: 0 16px; /* 上下内边距可按需调整，默认上下为0、左右为16px */
  min-height: 48px; /* 按需设置你想要的最小高度 */
}

/* 如果需要调整点击热区和菜单整体布局，可选添加如下配置 */
clr-dg-action-overflow .action-item button {
  min-height: inherit;
  width: 100%;
  justify-content: flex-start;
}

3. 对其他组件的影响说明 #

如果你不加clr-dg-action-overflow前缀直接全局修改.action-item，会影响所有使用该类名的Clarity组件，包括普通下拉菜单clr-dropdown、侧边栏操作项、卡片操作栏等的条目高度。只要加上上述父类选择器限定作用域，就不会对其他组件产生任何影响。

参考示意图：

内容的提问来源于stack exchange，提问作者Jeonsoft FaceBundy