如何使用CSS实现响应式UI？Styled-Text组件样式修复求助

问题背景 #

现有React代码如下：

<Text className="w-100 mt-0 align-self-center">
  Lorem ipsum  Lorem ipsum  Lorem ipsum<span>{'$200'}</span>
</Text>                                                                                        

<Text className="w-100 mt-0 align-self-center">
  Lorem ipsum<span>{'$100'}</span>Lorem ipsum
</Text>

<Text className="w-100 mt-0 align-self-center">
  {"Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"}
  <Button
    className="link-button"
    variant={VARIANTS.LINK}
    >
  <ButtonText>{'here'}</ButtonText>
  </Button>
</Text>

原Text组件的CSS-in-JS样式：

const Text = styled.div`
  font-family: ${(props) => props.theme.font.base};
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  color: ${(props) => props.theme.colors.text.secondary};
  a,
  button {
    text-decoration: underline currentColor;
    &:hover:not(:disabled) {
      text-decoration-color: transparent;
    }
  }
  span {
    font-weight: 600;
    white-space: nowrap;
    @media screen and (max-width: ${breakpoints.desktop}px) and (min-width: ${breakpoints.laptopL}px) {
      margin-top: 25px !important;
    }
    @media screen and (max-width: ${breakpoints.tablet}px) {
      margin-top: 25px !important;
    }
  }
`;

当前响应式视图下UI错乱的核心问题：

• span是行内元素，margin-top属性无法生效，强行加!important只会增加样式冲突风险
• 响应式断点下没有明确排版规则，导致价格文本和普通文本挤在一起，布局混乱

修复方案 #

重写Text组件样式，解决行内元素margin无效问题，明确响应式下的排版逻辑：

const Text = styled.div`
  font-family: ${(props) => props.theme.font.base};
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  color: ${(props) => props.theme.colors.text.secondary};
  /* 容器用flex布局，自动管理内部元素排版 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px; /* 元素间添加间距，避免拥挤 */

  a,
  button {
    text-decoration: underline currentColor;
    &:hover:not(:disabled) {
      text-decoration-color: transparent;
    }
    /* 防止按钮文本在响应式下被拆分 */
    white-space: nowrap;
  }

  span {
    font-weight: 600;
    white-space: nowrap;
    /* 转为行内块元素，让margin属性生效 */
    display: inline-block;
  }

  /* 平板及以下屏幕：改为垂直布局，价格单独占一行 */
  @media screen and (max-width: ${breakpoints.tablet}px) {
    flex-direction: column;
    align-items: flex-start;
    span {
      margin-top: 8px; /* 替换原无效的margin-top，数值可按需调整 */
    }
  }

  /* 中屏幕区间：给价格添加左侧间距，保持横向排版的整洁 */
  @media screen and (max-width: ${breakpoints.desktop}px) and (min-width: ${breakpoints.laptopL}px) {
    span {
      margin-left: 8px;
    }
  }
`;

修复说明 #

1. 容器flex布局：通过display: flex、flex-wrap: wrap和gap属性，让内部文本和元素自动适配空间，避免拥挤
2. span元素类型调整：display: inline-block解决行内元素margin无效的问题，让间距设置生效
3. 响应式断点优化：
   • 小屏幕：转为垂直布局，价格span单独占一行，添加合理上边距
   • 中屏幕：给价格span添加左侧间距，保持横向排版的同时避免和文本挤在一起
4. 按钮样式加固：添加white-space: nowrap，防止响应式下按钮文本被拆分

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