material-ui

问题 After migrating from material-ui v3 to v4, noticed the react component/function name in the class attribute inside the HTML. Is that expected? Might this somehow affect overriding class properties already noticing issues when trying to override with new styles which do not apply. Also is there a possibility to remove those? The component names are: WrapperComponent, withRouter, CustomerDetailsContainer among others. 回答1: Material-UI uses class name generator to generate unique class names for

问题 I have a problem overriding the styles in my theme in Material UI in React. I wanted to customize the border of columnsContainer but it isn't working. only the root is working well. Check Here for Codesanbox MuiDataGrid.js export default { root: { backgroundColor: "white", border: `1px solid green`, "& .columnsContainer": { borderBottom: `1px solid 'blue' !important` } } }; 回答1: Below is the correct syntax. The changes compared to your code sandbox are: Replace .columnsContainer with

问题 I am using Material UI 4.8.3 and have the following: const CustomizedCheckbox = withStyles({ root: { color: '#0f236e', '&$checked': { color: '#0f236e', }, }, checked: {}, })((props) => <Checkbox color="default" {...props} />); <Grid item xs={12} sm={12} md={12} lg={12} className="disclaimerAndNotes" > <FormControl fullWidth> <FormControlLabel control={<CustomizedCheckbox />} label={<div className="disclaimerandnotes">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy

问题 This is my parent component: import React from 'react'; import ChildModal from 'ChildModal'; const ParentComponent = () => ( <div> <span>Click </span> <a>HERE TO OPEN MODAL</a> <div> ); This is my child component: import React, { useState } from "react"; import { Modal, Backdrop, Fade } from "@material-ui/core"; const ChildModal = () => { const [open, setOpen] = useState(false); const handleOpen = () => { setOpen(true); }; const handleClose = () => { setOpen(false); }; return ( <div> <button

问题 This is my parent component: import React from 'react'; import ChildModal from 'ChildModal'; const ParentComponent = () => ( <div> <span>Click </span> <a>HERE TO OPEN MODAL</a> <div> ); This is my child component: import React, { useState } from "react"; import { Modal, Backdrop, Fade } from "@material-ui/core"; const ChildModal = () => { const [open, setOpen] = useState(false); const handleOpen = () => { setOpen(true); }; const handleClose = () => { setOpen(false); }; return ( <div> <button

问题 I am interested in best way to present a React Material-UI with icon and text, so it is all vertically aligned. Right now it does not work as expected, especially with conditional rendering. <Typography gutterBottom variant="subtitle2" component="h2" align="center"> <Grid container direction="row" alignItems="center" wrap="nowrap"> {p.numRooms > 0 && ( <Grid item xs={2} alignItems="center"> <HotelRoundedIcon color="secondary" /> {p.numRooms} </Grid> )} {p.area > 0 && ( <Grid item xs={2}>

问题 In the project with react Material Ui is used. The theme is being overriden, but the colors of buttons and inputs do not change. Here is the theme.js where Material Ui theme is created // @flow import { createMuiTheme } from '@material-ui/core'; import type { Theme, } from '@material-ui/core'; const theme: Theme = createMuiTheme({ palette: { primary: { main: '#ffa300', light: '#ffd449', dark: '#c67400', contrastText: '#000000', }, secondary: { main: '#ff8500', light: '#ffb644', dark: '#c55600

问题 I tried below code and while I was expecting to get a yellowish Hi, I got [object Object] instead. Is there a way to fix it? maybe using InputProps helps but unfortunately I couldn't find any detailed tutorial about it. <TextField id="outlined-multiline-static" label="Multiline" multiline fullWidth rows="22" value={<div> Hi <div style={{ color: "yellow" }}>There</div></div>} variant="outlined" /> Edit: I just simplified the problem and don't want the whole of the text to be yellow. https:/

问题 In my reactJS application, I use a list of Material UI ToolTip with IconButton as children inside a div container with overflow: scroll . In a particualar row the Material UI ToolTip looks like this: <ClickAwayListener onClickAway={handleTooltipClose}> <Tooltip PopperProps={{ disablePortal: true, }} onClose={handleTooltipClose} open={open} disableFocusListener disableHoverListener disableTouchListener title={data} arrow > <InfoOutlinedIcon className={classes.root} onClick={handleTooltipOpen}

问题 I am trying to change disable attribute in select on button click in react application using material ui My button code is: <AsistButton variant="outlined" color="primary" className={classes.button}>X</AsistButton> and from select is: <NativeSelect value={person} className={classes.margin} onChange={handleChangeSelect} input={<BootstrapInput name="person" id="person-customized-native-simple"/>} disabled > <option value=""/> <option value={10}>Peter</option> <option value={20}>Alex</option>