小编Mar*_* B.的帖子

我正在尝试将下一个图像组件添加到我的项目中。

我有一个问题，当我添加layout='responsive'.

代码：

<Box>
    <Link href='/' >
        <Image src='/images/logoDark.svg'
            alt='navbar-logo'
            width={260}
            height={56}
            layout='responsive'
        />
    </Link>
</Box>

有解决办法吗？或者任何其他方式来优化图像？

我正在使用react-slick-slider，我想要实现的是制作自定义箭头。
所以代码看起来像这样：

const FeedbackSlider = () => {
const [isLargeScreen] = useMediaQuery("(min-width: 1050px)")

const sliderRef = useRef<Slider>()

const prev = () => {
    sliderRef.current?.slickPrev()
}
const next = () => {
    sliderRef.current?.slickNext()
}
const settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: (isLargeScreen ? 2 : 1),
    slidesToScroll: 1,
    prevArrow: (isLargeScreen && <PrevArrow />),
    nextArrow: (isLargeScreen && <NextArrow />)
};
return (
    <Box px={['2', '4', '8', '16']} mx='auto' pt='12'>
        <Slider ref={sliderRef} {...settings}>
           // slider cards...
        </Slider>
        {!isLargeScreen && …

我正在将 Strapi v3 查询重写为 v4 (GraphQL)，并且使用新字段“数据”和“属性”，我遇到了过于深入嵌套对象的问题，这是数据外观的示例：

user {
  data {
    id
    attributes {
      company {
        data {
          id
          attributes {
            location {
              data {
                id
                ...
              }
          }
      }
    
    }
  }
}

我是否在文档中遗漏了某些内容，有没有办法避免这么多嵌套，我应该在模型中重组数据吗？

我正在尝试使用 Chakra UI 创建返回顶部按钮，但不确定如何仅在用户滚动一点后（例如在标题部分之后或 500px 之后）显示 BTT 按钮

<Link to='/#top'>
        <Box position='fixed'
            bottom='20px'
            right={['16px', '84px', '84px', '84px', '120px']}
            zIndex={2}
        >
            <Image src='images/icons/top.svg'
                w='60px'
                h='60px'
            />
        </Box>
    </Link>

我在使用下一个图像组件时遇到问题，某些图像未在移动设备上显示，但在大屏幕上显示。如果我手动更改浏览器宽度，它们不会消失。

例如

<Image src="/images/header-image.svg" width="676px" height="463px" />

我尝试不使用宽度和高度并使用布局填充，但问题是相同的，并且如果布局是响应式的，则图像不会在所有屏幕尺寸上显示。

我的 Chakra UI 框或弹性项目有问题（不确定是哪一个导致问题）。我无法让它们在平板电脑和手机上采用 100% 宽度。我设法使其工作的唯一方法是定义 VW 宽度，但这并不是在所有设备上都有响应。

现在看起来如何：

它应该是什么样子： 代码（不起作用的代码部分是第一个三元选项）：

enter code here

enter code here

import React from 'react'
import { Box, Flex, useMediaQuery } from '@chakra-ui/react'
import Section from 'components/section/Section'
import HoursCellList from 'components/schedule/hours/HoursCellList'
import DaysCellList from './days/DaysCellList'
import EventsComponent from 'components/schedule/events/EventsComponent'
import MobileDaysCellList from './days/MobileDaysCellList'
import MobileEventsFlex from 'components/schedule/events/MobileEventFlex'
interface Props {}

const ScheduleComponent = (props: Props) => {
  
    const [isSmallScreen] = useMediaQuery('(max-width: 1350px)')



    const [mobileClickedDay, setMobileClickedDay] = useState<number>(0)
    return (
        <Section isGray heading="Schedule" id="schedule">
            <Box …