React.js中Styled Component条件宽度与省略号失效问题排查

1. 条件宽度不生效的核心问题 #

你当前的代码里，styled组件的模板字符串函数参数写错了。styled-components 中，模板字符串里的函数接收的是整个props对象，而非直接的单个prop值。你写的${isCopied => css``}相当于把props对象命名为isCopied，导致内部判断的isCopied永远指向整个props对象（始终为真），宽度不会随目标prop变化。

修正后的代码：

export const PixCodeBox = styled(Box)`
  ${props => css`
    width: ${props.isCopied ? '170px' : '189px'};
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  `}
`;

2. text-overflow: ellipsis 不生效的排查方向 #

这个属性需要满足严格的布局条件才能生效，你可以逐一检查：

• 容器需为块级/行内块元素：如果Box组件默认是display: inline，需显式设置display: block或display: inline-block，text-overflow仅对块级容器生效。
• 容器宽度不能被内容撑开：确保父元素有明确宽度约束，避免容器自适应内容导致overflow: hidden无法触发。
• 内部元素不能打断nowrap规则：容器内的子元素不能设置white-space: normal或display: block，否则会破坏单行显示规则。
• 无样式覆盖：检查是否有父元素的flex: 1、min-width等规则强制撑开PixCodeBox的宽度，覆盖你设置的固定值。

补充display属性的示例代码：

export const PixCodeBox = styled(Box)`
  display: block; /* 或inline-block，根据布局需求选择 */
  ${props => css`
    width: ${props.isCopied ? '170px' : '189px'};
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  `}
`;

内容的提问来源于stack exchange，提问作者Lucifer's Heritage