0

我无法让我的尺寸做出响应。我将数组传递给样式组件，它应该针对不同的布局进行更改。布局已正确更改，当我将屏幕尺寸从宽更改为移动时，断点会正确显示。此设置中有 4 种尺寸。

但这就是我在检查开发工具时看到的。尺寸保持 100 像素，但有 4 个不同的，每个屏幕尺寸。这里发生了什么？

规模

   import { useAppContext, useGlobal } from 'Hooks'
import { Container, MobileExample } from './styles'

function Root({ route }) {
  const { global } = useGlobal()
  const { event, breakpoint } = useAppContext()

  return (
    <Container eventSlug={event?.slug}>
      <Helmet>
        <title>{global?.title}</title>
      </Helmet>

      <MobileExample width={['100px', '200px', '300px', '400px']}>
        {breakpoint}
      </MobileExample>

      {renderRoutes(route.routes)}
    </Container>
  )
}
    
export default Root

MobileExample 样式的组件看起来是这样的：

import styled from 'styled-components'
import { layout } from '@styled-system/layout'
export const MobileExample = styled.div`
  flex-shrink: 0;
  position: absolute;
  background: white;
  top: 0;
  left: 0;

  ${layout.width};
`

DefaultTheme 看起来是这样的：

export const BREAKPOINT = {
  MOBILE: 'mobile',
  TABLET: 'tablet',
  DESKTOP: 'desktop',
  WIDE: 'wide',
}

export const breakpoints = [512, 768, 1024, 1280]

//                    0  1  2  3   4   5   6   7   8
export const space = [0, 4, 8, 12, 16, 24, 32, 64, 128]

//                        0   1   2   3   4   5   6   7   8   9
export const fontSizes = [12, 14, 16, 20, 24, 32, 48, 64, 72, 96]

export const weights = [400, 700]

export const colors = {
  black: '#000',
  white: '#fff',
}

export const radius = 4
export const font = `-apple-system, BlinkMacSystemFont, sans-serif`
export const monospace = 'Menlo, monospace'

const defaultTheme = {
  BREAKPOINT,
  breakpoints,
  space,
  fontSizes,
  weights,
  font,
  monospace,
  colors,
  radius,
}

export default defaultTheme
4

0 回答 0