Grommet ResponsiveContext :当屏幕尺寸减小时，自定义断点不会使文本变小

Question

我正在开发一个web应用程序，我在前端使用react和grommet ui库进行设计。我想让我的web应用程序响应，但是当我使用ResponsiveContext并添加断点值时，当我将屏幕大小从大到小时，我仍然得到相同的文本大小。我从grommet文档复制了断点值。

码

// other imports ...

import { ResponsiveContext, Grommet } from "grommet";

const theme = {
  global: {
    font: {
      family: "Roboto",
    },
    breakpoints: {
      small: {
        value: 768,
        borderSize: {
          xsmall: "1px",
          small: "2px",
          medium: "4px",
          large: "6px",
          xlarge: "12px",
        },
        edgeSize: {
          none: "0px",
          hair: "1px",
          xxsmall: "2px",
          xsmall: "3px",
          small: "6px",
          medium: "12px",
          large: "24px",
          xlarge: "48px",
        },
        size: {
          xxsmall: "24px",
          xsmall: "48px",
          small: "96px",
          medium: "192px",
          large: "384px",
          xlarge: "768px",
          full: "100%",
        },
      },
      medium: { value: 1536 },
      large: {},
    },
  },
  layer: {
    background: "white",
    border: {
      radius: "10px",
    },
  },
};

const App = () => {

/*
some code 
*/

 return (
    <Grommet theme={theme}>
      <ResponsiveContext.Consumer>
        {(size) => (
          <AppGrid>
            <Toaster />
            <BrowserRouter>
              <Header
                notifsUpdated={notifsUpdated}
                scrollToList={scrollToList}
                
              />
              <GiveawayCreation />

              <Routes>
                <Route
                  path='/'
                  element={
                    <Main
                      data={data}
                      setData={setData}                      
                      refresh={refresh}
                      setRefresh={setRefresh}
                      showOwned={showOwned}
                      setShowOwned={setShowOwned}
                      MainRef={MainRef}
                      fetchLoading={fetchLoading}
                      fetchError={fetchError}
                      size={size}
                    />
                  }
                />
                <Route
                  path='/login/success'
                  element={<LoginSuccess />}
                />
                <Route
                  path='/deletedata'
                  element={
                    <DeletionData
                      setRefresh={setRefresh}
                      refresh={refresh}                    
                    />
                  }
                />
              </Routes>
              <AppFooter />
            </BrowserRouter>
          </AppGrid>
        )}
      </ResponsiveContext.Consumer>
    </Grommet>
  );
};

Answer 1

你所经历的可能有几个原因。

1. --您的上下文没有正确解析，size总是undefined，而不是实际的屏幕值(“小”、“中等”.)。测试的一种快速方法是按大小添加控制台日志消息，以确保设置为properly.
2. After，验证size是否正确设置，尝试向代码中添加实际的新的自定义断点，并确保它们已被解析。当前，您共享的代码具有与grommet相同的断点定义，因此您将不会看到代码行为有任何不同。

您可以尝试以下主题，该主题覆盖grommet的断点(为“xsmall”和“xlarge”添加一个大小)，并且应该可以工作：

import React from 'react';

import { Box, Grommet, Heading, ResponsiveContext } from 'grommet';

const customBreakpoints = {
  global: {
    breakpoints: {
      xsmall: {
        value: 375,
      },
      small: {
        value: 568,
        edgeSize: {
          none: '0px',
          small: '6px',
          medium: '12px',
          large: '24px',
        },
      },
      medium: {
        value: 768,
        edgeSize: {
          none: '0px',
          small: '12px',
          medium: '24px',
          large: '48px',
        },
      },
      large: {
        value: 1024,
        edgeSize: {
          none: '0px',
          small: '12px',
          medium: '24px',
          large: '48px',
        },
      },
      xlarge: {
        value: 1366,
        edgeSize: {
          none: '0px',
          small: '12px',
          medium: '24px',
          large: '48px',
        },
      },
    },
  },
};

export const CustomBreakpoints = () => (
  <Grommet theme={customBreakpoints} full>
    <ResponsiveContext.Consumer>
      {size => (
        <Box fill background="brand">
          <Heading>{`Hi, I'm ${size}, resize me!`}</Heading>
        </Box>
      )}
    </ResponsiveContext.Consumer>
  </Grommet>
;