css - 尝试使用内联时 React 和 styled-components 的媒体查询问题

Question

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

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

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;

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

Answer 1

您可以尝试添加一个 on resize 事件监听器来更改您随后在组件中使用的变量

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

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