emotion/react基于Props的条件样式失效问题求助

核心原因 #

1. 样式优先级冲突：react-phone-number-input组件自身的.PhoneInput类样式，优先级和你通过emotion定义的样式相同，且组件自带样式加载顺序更靠后，导致你的条件样式被覆盖。
2. 条件样式缺省默认值：当窗口宽度≥550px时，你没有为align-items、flex-direction设置明确默认值，此时组件自带样式会主导这些属性，造成样式未按预期生效的错觉。
3. 选择器权重不足：emotion生成的类选择器和组件原生的.PhoneInput类权重一致，无法覆盖原生样式。

修复方案 #

方案1：提升选择器权重 #

通过嵌套选择器提升自定义样式的权重，确保能覆盖组件原生样式：

export const StyledPhoneInput = styled(PhoneInput)<StyledTextInputProps>`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 2px solid;
  border-color: ${colors.gray[200]};
  padding-bottom: 16px;

  // 用父组件类 + 目标类的组合选择器，提升权重
  & .PhoneInput {
    align-items: ${props => props.width < 550 ? 'flex-start' : 'center'};
    flex-direction: ${props => props.width < 550 ? 'column' : 'row'};
    background-color: ${props => props.width < 550 ? 'red' : 'transparent'};
  }
`

方案2：完善条件样式的默认值 #

确保每个CSS属性在所有宽度场景下都有明确值，避免组件原生样式补位：

import { css } from '@emotion/react';

export const StyledPhoneInput = styled(PhoneInput)<StyledTextInputProps>`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 2px solid;
  border-color: ${colors.gray[200]};
  padding-bottom: 16px;

  .PhoneInput {
    // 明确设置默认值，覆盖组件原生样式
    align-items: center;
    flex-direction: row;
    background-color: transparent;

    // 窗口宽度小于550px时覆盖默认值
    ${props => props.width < 550 && css`
      align-items: flex-start;
      flex-direction: column;
      background-color: red;
    `}
  }
`

方案3：改用CSS媒体查询（更推荐） #

手动监听窗口resize并非最优解，emotion支持直接在样式中使用媒体查询，更符合CSS响应式规范，也能避免props传递的问题：

export const StyledPhoneInput = styled(PhoneInput)`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 2px solid;
  border-color: ${colors.gray[200]};
  padding-bottom: 16px;

  .PhoneInput {
    align-items: center;
    flex-direction: row;
    background-color: transparent;

    // 直接使用媒体查询，无需手动监听窗口尺寸
    @media (max-width: 549px) {
      align-items: flex-start;
      flex-direction: column;
      background-color: red;
    }
  }
`

额外优化：父组件监听逻辑修复 #

你的父组件中useEffect依赖项包含windowWidth，会导致每次窗口尺寸变化时重复绑定/解绑resize事件，改为空依赖数组即可：

const [windowWidth, setWindowWidth] = useState(window.innerWidth);

useEffect(() => {
  const handleResize = () => {
    setWindowWidth(window.innerWidth);
  };
  
  window.addEventListener('resize', handleResize);
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // 空依赖，只绑定一次事件

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