คำถามติดแท็ก material-ui

ฉันเขียนรหัสบางส่วน: function renderGreeting(Elem: React.Component<any, any>) { return <span>Hello, <Elem />!</span>; } ฉันได้รับข้อผิดพลาด: ประเภทองค์ประกอบ JSX Elemไม่มีการสร้างหรือลายเซ็นการโทรใด ๆ มันหมายความว่าอะไร?

158 reactjs  typescript  material-ui 

ฉันได้รับข้อผิดพลาดด้านล่างเมื่อใดก็ตามที่ฉันพยายามใช้makeStyles()กับส่วนประกอบด้วยวิธีวงจรชีวิต: สายเบ็ดไม่ถูกต้อง ตะขอสามารถเรียกได้เฉพาะภายในร่างกายของส่วนประกอบฟังก์ชันเท่านั้น สิ่งนี้อาจเกิดขึ้นจากสาเหตุใดสาเหตุหนึ่งต่อไปนี้: คุณอาจมีเวอร์ชันของ React และ renderer ที่ไม่ตรงกัน (เช่น React DOM) คุณอาจทำผิดกฎของ Hooks คุณอาจมี React มากกว่าหนึ่งสำเนาในแอปเดียวกัน ด้านล่างนี้เป็นตัวอย่างโค้ดเล็กน้อยที่ทำให้เกิดข้อผิดพลาดนี้ ตัวอย่างอื่น ๆ กำหนดชั้นเรียนให้กับรายการย่อยเช่นกัน ฉันไม่พบสิ่งใดในเอกสารของ MUI ที่แสดงวิธีอื่น ๆ ในการใช้งานmakeStylesและมีความสามารถในการใช้วิธีการตลอดอายุการใช้งาน import React, { Component } from 'react'; import { Redirect } from 'react-router-dom'; import { Container, makeStyles } from '@material-ui/core'; import LogoButtonCard from '../molecules/Cards/LogoButtonCard'; …

123 reactjs  material-ui 

ฉันกำลังเล่นกับMaterial-UIอยู่นิดหน่อย มีตัวเลือกใดบ้างสำหรับการสร้างเค้าโครงกริด (เช่นในBootstrap ) หรือไม่? ถ้าไม่วิธีเพิ่มฟังก์ชันนี้คืออะไร? มีส่วนประกอบ GridListแต่ฉันเดาว่ามันมีจุดประสงค์ที่แตกต่างกัน

118 reactjs  material-design  material-ui  grid-system 

การใช้เมธอด css-in-js เพื่อเพิ่มคลาสให้กับคอมโพเนนต์การตอบสนองฉันจะเพิ่มคอมโพเนนต์หลายรายการได้อย่างไร นี่คือตัวแปรคลาส: const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { padding: 10 }, }); นี่คือวิธีที่ฉันใช้: return ( <div className={ this.props.classes.container }> ข้างต้นใช้งานได้ แต่มีวิธีเพิ่มทั้งสองคลาสโดยไม่ใช้classNamesแพ็คเกจ npm หรือไม่? สิ่งที่ต้องการ: <div className={ this.props.classes.container + this.props.classes.spacious}>

92 css  reactjs  material-design  material-ui  jss 

ด้วยเหตุผลบางอย่างฉันไม่สามารถรับdatepicker ของui วัสดุให้ทำงานได้ ทุกครั้งที่ datepicker แสดงผลใน React ข้อผิดพลาดต่อไปนี้จะถูกส่งออกไป: RangeError: สตริงรูปแบบมีอักขระตัวอักษรละตินที่ไม่ใช้ Escape n ฉันได้สร้าง stackblitz ด้วยเพียง datepicker ( https://stackblitz.com/edit/react-6ma6xd?embed=1&file=index.js ) และยังมีข้อผิดพลาดปรากฏขึ้น ผมทำอะไรผิดหรือเปล่า? ฉันคิดว่าฉันทำตามคำแนะนำทั้งหมดจากคู่มือการติดตั้ง เชื่อมโยงไปยัง material-ui / pickers: https://material-ui-pickers.dev/

19 javascript  reactjs  material-ui  material-ui-pickers 

ฉันหมายถึงเอกสารของ React Material-UI ( https://material-ui.com/components/autocomplete/ ) ในรหัสตัวอย่าง <Autocomplete options={top100Films} getOptionLabel={(option: FilmOptionType) => option.title} style={{ width: 300 }} renderInput={params => ( <TextField {...params} label="Combo box" variant="outlined" fullWidth /> )} /> ฉันทำงานได้ดี แต่ฉันไม่แน่ใจว่าฉันควรได้รับค่าที่เลือกไว้อย่างไร ตัวอย่างเช่นฉันต้องการใช้onChangeเสาเพื่อทำสิ่งนี้เพื่อให้ฉันสามารถดำเนินการบางอย่างตามการเลือก ฉันพยายามเพิ่ม onChange={v => console.log(v)} แต่vจะไม่แสดงสิ่งใดที่เกี่ยวข้องกับค่าที่เลือก

17 javascript  reactjs  material-ui 

เมื่อพยายามเข้าถึงส่วนประกอบเข้าสู่ระบบของแอป MERN ของฉันในเวอร์ชันการผลิตฉันได้รับข้อผิดพลาดประเภทต่อไปนี้ที่แสดงในภาพนี้: แอพของฉัน ( https://github.com/ahaq0/kumon_schedule ) ทำงานได้อย่างสมบูรณ์แบบในพื้นที่และทำงานได้ดีกับโฮสต์บน Heroku เมื่อก่อนวันนี้ ฉันลองย้อนกลับการเปลี่ยนแปลงทั้งหมดในรหัสที่ฉันทำในวันนี้เพื่อประโยชน์ ฉันตรวจสอบ package.json (และ. ล็อค) เพื่อดูว่าฉันเปลี่ยนการพึ่งพา UI ของวัสดุหรือไม่ แต่นั่นก็เหมือนกัน ฉันไม่สามารถดูเหมือนจะคิดออกว่าทำไมมันหยุดการทำงานทั้งหมดในทันทีกับรุ่นเป็นเจ้าภาพที่นี่ รหัสสำหรับสายของข้อผิดพลาดอยู่ด้านล่าง อย่างไรก็ตามฉันไม่ได้เขียนเนื่องจากเป็นส่วนหนึ่งของ UI วัสดุ if (sheetManager.dynamicStyles) { var dynamicSheet = stylesOptions.jss.createStyleSheet(sheetManager.dynamicStyles, _extends({ link: true }, options)); dynamicSheet.update(props).attach(); state.dynamicSheet = dynamicSheet; state.classes = mergeClasses({ baseClasses: sheetManager.staticSheet.classes, newClasses: dynamicSheet.classes }); if (sheetsRegistry) …

15 reactjs  typescript  heroku  material-ui  mern 

ฉันต้องการใช้Autocompleteส่วนประกอบสำหรับแท็กอินพุต ฉันพยายามรับแท็กและบันทึกในสถานะดังนั้นฉันสามารถบันทึกในฐานข้อมูลในภายหลัง ฉันใช้ฟังก์ชั่นแทนการเรียนในปฏิกิริยา ฉันลองด้วยonChangeแต่ไม่ได้ผลลัพธ์ใด ๆ <div style={{ width: 500 }}> <Autocomplete multiple options={autoComplete} filterSelectedOptions getOptionLabel={option => option.tags} renderInput={params => (<TextField className={classes.input} {...params} variant="outlined" placeholder="Favorites" margin="normal" fullWidth />)} />

12 reactjs  material-ui 

ฉันได้ติดตั้ง material-ui / lab เพื่อให้ผู้ใช้ส่วนประกอบการแจ้งเตือน แต่เมื่อใดก็ตามที่ฉันนำเข้ามัน: import Alert from '@material-ui/lab/Alert';มันล้มเหลวในการรวบรวมและโยนข้อผิดพลาดนี้: ./node_modules/@material-ui/lab/esm/internal/svg-icons/SuccessOutlined.js Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'. ดังนั้นฉันจึงพยายาม google ปัญหานี้และพบคำถามอื่นเกี่ยวกับmaterial-ui/lab/AutoCompleteองค์ประกอบ ( คำถามนี้แน่นอน ) และคำตอบที่ยอมรับได้คือการอัปเดต material-ui / core เป็นรุ่น 4.9.9 และดูเหมือนว่ามันเหมาะสำหรับคนที่ถาม แต่น่าเสียดายที่ไม่ใช่สำหรับฉันฉันมีสิ่งต่าง ๆ ที่ติดตั้ง ui material -ui รุ่นนี้: "@material-ui/core": "^4.9.9", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.48", ดังนั้นตอนนี้ฉันกำลังถามพวกคุณว่ามีวิธีอื่นในการแก้ปัญหานี้หรือไม่ขอบคุณ

11 javascript  node.js  reactjs  material-ui 

ฉันได้รับข้อผิดพลาดต่อไปนี้เมื่อฉันรันโครงการบนเบราว์เซอร์: ไม่สามารถรวบรวม: ./node_modules/@material-ui/lab/esm/internal/svg-icons/Close.js Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'. ฉันกำลังพยายามใช้องค์ประกอบการเติมข้อความอัตโนมัติ (จากตัวอย่างในส่วน "ค่าหลายค่า") นี่คือรหัสที่ฉันใช้: import React from 'react'; import Chip from '@material-ui/core/Chip'; import Autocomplete from '@material-ui/lab/Autocomplete'; import TextField from '@material-ui/core/TextField'; <Autocomplete multiple id="tags-standard" options={top100Films} getOptionLabel={(option) => option.title} defaultValue={[top100Films[13]]} renderInput={(params) => ( <TextField {...params} variant="standard" label="Multiple values" placeholder="Favorites" /> …

11 reactjs  typescript  material-ui