मैं इस तरह material-ui-search-bar का उपयोग कर रहा था और यह ठीक काम किया:

<SearchBar
         style={{
          margin: '0 auto',
          maxWidth: 800,
        }}
        />

हालांकि, जब मैं इसे स्टाइल घटकों में बदलता हूं, तो स्टाइल ठीक से काम नहीं करता है और खोज बार पूरी स्क्रीन तक फैल जाता है।

export const StyledSearchBar = styled(SearchBar)`
  margin: 0 auto;
  max-width: 800;
`;

मैंने maxWidth का उपयोग करने का भी प्रयास किया। मैं इसे कैसे ठीक करूं?

मैं एमयूआई थीम त्रुटियों के कारण सैंडबॉक्स बनाने में असमर्थ हूं।

0
Jnl 18 अप्रैल 2020, 16:04

1 उत्तर

सबसे बढ़िया उत्तर

material-ui-search-bar को material-ui संस्करण 1.0 या इसके बाद के संस्करण की आवश्यकता है।
आपके कोड को काम करने के लिए आपको निम्नलिखित निर्भरताओं की आवश्यकता है:

"@material-ui/core": "4.9.11",
"@material-ui/icons": "4.9.1",
"material-ui": "1.0.0-beta.47",
"material-ui-search-bar": "1.0.0-beta.14",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0",
"styled-components": "5.1.0"

चौड़ाई के संबंध में - नोड कि स्टाइल घटक के साथ आप चौड़ाई पर पीएक्स सेट करने के लिए तैयार हैं:

export const StyledSearchBar = styled(SearchBar)`
  margin: 0 auto;
  max-width: 800px;
`;

और यहां अपडेट किया गया कोडसैंडबॉक्स है: https://codesandbox.io /s/styled-material-ui-search-box-example-4mpoc

1
Dekel 18 अप्रैल 2020, 15:01