sender slot 插入的上下没有居中

[starplatinum3]

@dosu sender slot 插入的上下没有居中

[dosubot]

这是 Sender 组件的一个样式问题。Sender 的内容容器使用了 alignItems: 'flex-end'（底部对齐），而只有输入框自身通过 alignSelf: 'center' 覆盖为居中对齐 [1]。prefix/suffix slot 没有这个覆盖，所以它们会继承父容器的底部对齐，导致看起来没有垂直居中。

临时解决方案：给你插入的 slot 元素添加 align-self: center 样式：

.your-slot-element {
  align-self: center;
}

或者通过 inline style：

<Sender prefix={() => <YourComponent style={{ alignSelf: 'center' }} />} />

这确实看起来像是一个可以优化的点——prefix/suffix slot 应该默认居中对齐，和输入框保持一致。可以考虑提一个 PR 来修复这个问题。

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[starplatinum3]

@dosu <span contenteditable="false" data-slot-key="11111111111" class="ant-sender-slot"> 如果用这个组件的时候 要改这个样式 ant-sender-slot 要怎么写antd-style

[dosubot]

你可以通过以下方式用 antd-style 的 createStyles 来覆盖 .ant-sender-slot 的样式：

方式一：通过 classNames prop + createStyles

import { createStyles } from 'antd-style';

const useStyles = createStyles(({ css }) => ({
  senderInput: css`
    .ant-sender-slot {
      align-self: center;
      /* 你需要的其他样式 */
    }
  `,
}));

function MyComponent() {
  const { styles } = useStyles();
  
  return (
    <Sender classNames={{ input: styles.senderInput }} />
  );
}

方式二：通过 rootClassName 或外层包裹 class 做作用域限制

const useStyles = createStyles(({ css, prefixCls }) => ({
  sender: css`
    .ant-sender-slot {
      align-self: center;
    }
  `,
}));

function MyComponent() {
  const { styles } = useStyles();
  
  return <Sender className={styles.sender} />;
}

Sender 组件支持 classNames 和 styles 两个 prop，其中 slot 元素位于 input 语义区域内 [1]。所以用 classNames.input 配合嵌套选择器 .ant-sender-slot 就可以精确定位到 slot 元素的样式。

对于上下居中的问题，关键样式就是 align-self: center。

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.