material-ui

问题 I am trying to implement a tree using the material in Reactjs. But, according to my design, the button to collapse and expand should be on the right side. Also, I am getting an error when added an icon in TreeItem like this: <TreeItem nodeId="1" label="RSMSSB" icon={FolderIcon}> Whole code: import React from "react"; import { makeStyles } from "@material-ui/core/styles"; import TreeView from "@material-ui/lab/TreeView"; import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; import

问题 I am trying to use Material UI radio buttons with Formik, and they are not clicking properly. I've reduced the problem to the following example: https://codesandbox.io/s/amazing-currying-s5vn0 If anyone knows what I might be doing wrong, or if there is a bug in either system, then please let me know. When clicking on the buttons in the above example, they do not stay clicked. I have a more complex react functional component that uses other library components, so I cannot include it here. It

问题 Im using the makeStyles() function in material-UI's react library, and am getting the following error Hooks can only be called inside the body of a function component. Below is an example of the kind of code I am using. const useStyles = makeStyles(theme => ({ container: { display: 'flex', flexWrap: 'wrap', }, textField: { marginLeft: theme.spacing(1), marginRight: theme.spacing(1), }, dense: { marginTop: theme.spacing(2), }, menu: { width: 200, }, })); class Demo extends Component {

问题 I'm trying something very simple: building two themes for a website using Material-UI themes: A light theme and dark one, but it does not work well: the theme is on every Material-UI react element, but the root element on the html document keeps having the same default white background. Of course it can be changed by attacking the body with pure .css: body { background-color: #222; } But I was looking to change it dynamically with React, I though this would work, but it does not: import React

问题 How to add link per TableRow in .map? *my error is validateDOMNesting(...): cannot appear as a child of "< a >" im using react router react-router-dom how to add link in every loop of .map in Table TableRow? import React, { Fragment } from 'react' import { Paper } from 'material-ui' import Table from 'material-ui/Table'; import TableBody from 'material-ui/Table/TableBody'; import TableCell from 'material-ui/Table/TableCell'; import TableHead from 'material-ui/Table/TableHead'; import TableRow

问题 How to add link per TableRow in .map? *my error is validateDOMNesting(...): cannot appear as a child of "< a >" im using react router react-router-dom how to add link in every loop of .map in Table TableRow? import React, { Fragment } from 'react' import { Paper } from 'material-ui' import Table from 'material-ui/Table'; import TableBody from 'material-ui/Table/TableBody'; import TableCell from 'material-ui/Table/TableCell'; import TableHead from 'material-ui/Table/TableHead'; import TableRow

问题 How to add link per TableRow in .map? *my error is validateDOMNesting(...): cannot appear as a child of "< a >" im using react router react-router-dom how to add link in every loop of .map in Table TableRow? import React, { Fragment } from 'react' import { Paper } from 'material-ui' import Table from 'material-ui/Table'; import TableBody from 'material-ui/Table/TableBody'; import TableCell from 'material-ui/Table/TableCell'; import TableHead from 'material-ui/Table/TableHead'; import TableRow

问题 I want to use MUI Grid https://material-ui.com/api/grid/ and I wanted to hide one item Grid if the screen is small, so I found something called Display https://material-ui.com/system/display/ . My code looks like this function CRUDView() { return ( <Grid container spacing={1} direction="row" justify="center" alignItems="center" > <Grid item xs={12} lg={6}> <span>XX</span> </Grid> <Grid item xs={6} display={{ xs: "none", lg: "block" }} > <span>YY</span> </Grid> </Grid> ); } I don´t uderstand

问题 I'm trying to add a snackBar in order to display a message whenever a user signIn or not. SnackBar.jsx: import React from "react"; import PropTypes from "prop-types"; import classNames from "classnames"; import CheckCircleIcon from "@material-ui/icons/CheckCircle"; import ErrorIcon from "@material-ui/icons/Error"; import CloseIcon from "@material-ui/icons/Close"; import green from "@material-ui/core/colors/green"; import IconButton from "@material-ui/core/IconButton"; import Snackbar from "

问题 Normally I'd use material-ui icons by importing them directly per the material-ui instructions. But I have a text tag, which is the actual icon name (like calendar_view_day ) and need to get and render an icon component from it dynamically. How can I something like: render() { return ( <Icon name="calendar_view_day" color="primary" /> ) } Instead of: render() { return ( <CalendarViewDay color="primary" /> // Imported by name ) } 回答1: OK, so I massively overthought this. Correct answer Turns