material-ui

问题 I am creating a form in Materia-UI and React.js, and I am making validation of two TextField. I want to validate both TextFields with same error and textHelper props. Below I have show a piece of code of my work. If somebody have an idea please share with me, it will be helpful. const AddPost = ({error, helperText, handleInputChange, handleSubmit}) => { <div> <form onSubmit={handleSubmit}> <TextField value={titleValue} onChange={handleInputChange} helperText={helperText} error={error} name={

问题 I'm using the material UI autocomplete in react and it's working fine. However, I can't figure out how to get the object of the selected item. Ex I want to search for a person and then add that item to an array of objects, and into a table. The person object including name, email and so on. And I can't seem to find any examples of this. My code looks like this: My code I trying: https://material-ui.com/components/autocomplete/ Does anyone have an Idé on how to do this? I'm pretty new to react

问题 I am new to the material UI. here, I have two tabs and that tabs has some content. Now, I am trying to add the text overflow elipses to this . But the text is in span over there, <Tab key={`${tab}_${index}`} classes={{ root: css.tabRoot, selected: css.tabSelected, wrapper: css.tabIconWrapper, labelIcon: css.tabLabelIcon }} disableRipple label={tab.label} value={tab.value} icon={ tab.icon ? <Icons className={css.tabIcons} iconname={tab.icon} /> : null } /> Now, Here the label is having a bit

问题 I have installed material-ui/lab in order to user the alert component, but whenever i import it with: import Alert from '@material-ui/lab/Alert'; it fails to compile and throws this error: ./node_modules/@material-ui/lab/esm/internal/svg-icons/SuccessOutlined.js Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'. So I tried to google this problem and found another question about the material-ui/lab/AutoComplete component (This question exactly) and the

问题 I have installed material-ui/lab in order to user the alert component, but whenever i import it with: import Alert from '@material-ui/lab/Alert'; it fails to compile and throws this error: ./node_modules/@material-ui/lab/esm/internal/svg-icons/SuccessOutlined.js Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'. So I tried to google this problem and found another question about the material-ui/lab/AutoComplete component (This question exactly) and the

问题 What I am trying to achieve I have two classes - root and button - I want to affect button class on root state (for example :hover ). My attempt I'm trying to display button on root:hover . const styles = { root: { '&:hover' { // here I can style `.root:hover` button: { // and I've tried to affect `.root:hover .button` here display: 'block' } } }, button: { display: 'none' } } Expected ouput : .element-root-35 .element-button-36:hover { display: block; } Current output: .element-root-35:hover

问题 I am using the ToolTip component, I have two texts for the title, just wonder is that possible to render them as two lines (each language in one line) rather than one line? How can I apply the expected style to this component? Here is the code: renderToolTip = tipText => { const { classes } = this.props; if (tipText) { return ( <Tooltip title={tipText} placement="left" classes={{ tooltip: classes.tooltip, }}> <IconButton> <InfoOutlined /> </IconButton> </Tooltip> ); } return null; };

问题 In Material UI Grid, to space Grid Item vertically, I provided spacing in Grid Container. It looks good on big screens but on mobile, it results in awkward horizontal spacing between Grid Items. <Grid container spacing={24}> <Grid item xl={6} md={6} sm={12} xs={12}> <TextField required id="outlined-email-input" label="Customer Name" name="email" fullWidth /> </Grid> <Grid item xl={6} md={6} sm={12} xs={12}> <TextField required id="outlined-email-input" label="Customer Name" name="email"

问题 I want to create TextField element that has value when user key in followed by Input Adornment. Is it possible to add % sign after value instead of end of input ? Currently percentage sign(%) is at start of input before user key in and will go to end of input if there is value. <TextField {...defaultProps} InputProps={{ startAdornment: this.state.percentage ? ( <span /> ) : ( <InputAdornment position='start'>%</InputAdornment> ), endAdornment: this.state.percentage ? ( <InputAdornment

问题 I use Linear Determinate and i want to display how much progress is completed in number. like below image. 回答1: I don't think Material UI provides progress bar as shown in your image above. However, you can make use of React Bootstrap package and get things done. Here is the link - https://react-bootstrap.github.io/components/progress/ 回答2: You could display this.state.completed which shows the percentage value of the progress and the just add some style to it. Of course, you'll have to