Css 尝试使用内联时，媒体查询出现react和样式化组件问题

因此，我有一个屏幕，它会根据一些媒体查询而改变，这个屏幕由通用样式的组件组成，当我需要一个特定的功能时，我会将它与屏幕上的组件内联，其中一些属性是定位和/或高度/宽度

在设计了桌面屏幕之后，我正在尝试实现一个移动屏幕。 我将显示一些代码

type Props = {
  setDisplayScreen: Function,
};

const SignIn = ({ setDisplayScreen }: Props) => (
  <ScreenDiv>
    <ImageContainer>
      <ImageDiv bg={sideimage} src={sideimage} alt="logo" />
    </ImageContainer>
    <FormDiv>
      <Input style={{ marginTop: 44 }} placeholder="Username" />
      <Input style={{ marginTop: 44 }} placeholder="Password" />
      <PinkButton style={{ marginTop: 45, width: 82, cursor: 'pointer' }}>
        Sign in
      </PinkButton>
      <NunitoItalic18 style={{ marginTop: 60 }}>
        Forgot username or password
      </NunitoItalic18>
      <Nunito20
        style={{ marginTop: 45.8, cursor: 'pointer' }}
        onClick={() => setDisplayScreen('SignUpOptions')}
      >
        Don’t have an account? Sign up
      </Nunito20>
    </FormDiv>
  </ScreenDiv>
);

export default SignIn;

类型道具={
设置显示屏：功能，
};
常量符号=（{setDisplayScreen}:Props）=>(
登录
忘记用户名或密码
setDisplayScreen（'SignUpOptions'）}
>
没有帐户？注册吧
);
导出默认签名；

---

我的具体问题是如何根据屏幕大小更改中图像的url以及根据屏幕大小更改边距空间？

您可以尝试添加一个调整大小事件侦听器，该侦听器可以更改一个变量，然后在组件中使用该变量

if (browserScreenSize === mobile) {
   //set margin and image for mobile
} else {
  //set margin and image for desktop
}

---

然后在组件中指定变量名而不是值

我真的不知道该怎么做1。添加事件侦听器以检查您是在移动设备上还是在桌面2上。设置您将在resize let backgroundimg上编辑的变量；如果（移动）{backgroundimg='url here'}其他{backgroundimg='url here'}3。在组件中，使用变量而不是url