मैं अपने लेआउट को मोबाइल पर उत्तरदायी बनाने के लिए उत्तरदायी संदर्भ को कैसे शामिल कर सकता हूं?

बटन लेआउट के ड्राइवर नहीं हैं, और उनके लेआउट को रैपर लेआउट घटक द्वारा नियंत्रित किया जाता है, आपके मामले में, यह कोडसैनबॉक्स पर ग्रोमेट घटक के नीचे बॉक्स घटक है।

बॉक्स घटक स्वचालित रूप से आपके द्वारा परिभाषित कस्टम ब्रेकप्वाइंट के लिए उत्तरदायी है और यह अपेक्षित रूप से काम करता प्रतीत होता है, कहा जा रहा है, ग्रोमेट बॉक्स ब्रेकपॉइंट परिभाषाओं से अच्छी तरह से गणना करता है कि आपका ऐप वैसे भी डिफ़ॉल्ट रूप से उपयोग करेगा, इसलिए जब तक आपके कस्टम ब्रेकप्वाइंट के लिए विशेष आवश्यकताएं, डिफ़ॉल्ट का उपयोग करके आमतौर पर चाल चलती है और जटिलता को दूर करती है।

आपका कोड ResponsiveContext आयात कर रहा था, लेकिन ResponsiveContext लेआउट घटक को लपेट नहीं रहा था, और यह आकार प्रोप का उपयोग नहीं करता था, इसलिए एक बार उन्हें जोड़ने के बाद मुझे लगता है कि यह अपेक्षा के अनुरूप काम करता है। मैंने केवल div को ResponsiveContext से बदल दिया (बॉक्स का उपयोग करते समय div की आवश्यकता नहीं है), और size और width को बॉक्स में निम्नानुसार जोड़ा गया है:

    <ResponsiveContext.Consumer>
      {size => (
        <Box
          direction="column"
          align="center"
          gap="medium"
          pad="small"
          overflow={{
            horizontal: "auto"
          }}
          width={size==="small" ? "200px" : "400px"}
        >
   ...

अपने सैंडबॉक्स में उपरोक्त कोड भाग का उपयोग करने से आपको एक बेहतर विचार मिलेगा कि उत्तरदायी तरीके से बटनों को कैसे नियंत्रित किया जाए। आप width प्रोप पर मूल्यों के साथ खेल सकते हैं जैसा कि आप फिट देखते हैं, वर्तमान में, यह 'छोटे' स्क्रीन आकार पर बटन की चौड़ाई 200px पर सेट करता है, और अन्यथा 400px का उपयोग करता है (मैंने यादृच्छिक मान चुना है), और आप तर्क और मूल्यों के साथ खेल सकते हैं जैसा कि आप फिट देखते हैं। जैसा कि आपने सुझाव दिया है, आप width={size} का भी उपयोग कर सकते हैं और यह चौड़ाई के आकार को ब्रेकपॉइंट मान ('छोटा', ​​'मध्यम', 'बड़ा'...)

यहाँ पूरा कोड उदाहरण है:

import React from "react";
import ReactDOM from "react-dom";
import { Box, Button, Grommet, ResponsiveContext } from "grommet";
import { DocumentPdf } from "grommet-icons";

import { deepMerge } from "grommet/utils";
import { grommet } from "grommet/themes";

import "./styles.css";

const customBreakpoints = deepMerge(grommet, {
  global: {
    breakpoints: {
      small: {
        value: 368,
        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: 768,
        borderSize: {
          xsmall: "2px",
          small: "4px",
          medium: "8px",
          large: "12px",
          xlarge: "16px"
        },
        edgeSize: {
          none: "0px",
          hair: "1px",
          xxsmall: "2px",
          xsmall: "3px",
          small: "6px",
          medium: "12px",
          large: "24px",
          xlarge: "48px"
        },
        size: {
          xxsmall: "48px",
          xsmall: "96px",
          small: "192px",
          medium: "384px",
          large: "768px",
          xlarge: "1200px",
          full: "100%"
        }
      },
      large: {}
    }
  }
});

const App = () => (
  <Grommet theme={customBreakpoints}>
    <ResponsiveContext.Consumer>
      {size => (
        <Box
          direction="column"
          align="center"
          gap="medium"
          pad="small"
          overflow={{
            horizontal: "auto"
          }}
          width={size==="small" ? "200px" : "400px"}
        >
          <Button
            primary
            hoverIndicator="true"
            style={{
              width: "100%"
            }}
            label="Next"
          />

          <Button
            primary
            icon={<DocumentPdf color="white" />}
            style={{
              width: "100%"
            }}
            label="Export PDF"
          />

          <Button
            primary
            icon={<DocumentPdf color="white" />}
            style={{
              width: "100%"
            }}
            label="Export all"
          />
        </Box>
      )}
    </ResponsiveContext.Consumer>
  </Grommet>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

उम्मीद है ये मदद करेगा।