Develop Reference

MUI How to output text with Break Lines?

Every time I add content to the MUI Textfield it outputs it without any line breaks.
Is there a better solution to use?
<Stack direction="row" alignItems="start" justifyContent="start" mb={5}>
<TextField
name="Content" placeholder="Content" multiline={true}
value={content}
rows={18}
sx={{width: '100%'}}
onChange={(e) => setContent(e.target.value)}
/>
<div style={{maxWidth:"50%", paddingLeft:"10px"}} dangerouslySetInnerHTML={{__html: generateContent(content)}}></div>
</Stack>

Here's an example:
https://codesandbox.io/s/festive-dewdney-crxls
<Stack direction="row">
<TextField multiline value={state} onChange={handleChange} />
<Box sx={{ whiteSpace: "pre-wrap" }}>{state}</Box>
</Stack>
I used the whiteSpace: "pre-wrap" sx prop on the box where I am previewing the text, and I used the multiline prop on the textfield to make it a textarea input, and it worked.

I think the problem lies in your CSS and not in MUI. Use the white-space CSS property like this:
<div style={{maxWidth:"50%", paddingLeft:"10px", whiteSpace: "pre-wrap"}}...
Read more about pre-wrap and the other values here
If this does not work then there are two similar questions but I doubt you will need them.
Best way to preserve new lines when I post data from a Multi Line Text Field
New line '\n' not recognized inside TextField in React

Ant Design: How to remove trailing end gutter on each Row

I am using antd's Row and Col components to create a responsive grid. However, when a column wraps underneath due to a breakpoint, there is some clear whitespace (pretty sure caused by gutters) at the end of the line above a shown bellow:
The textfields belong in one row, and the button in another. There is a gutter next to each text field that I want to get rid of so they properly fit the parent's width.
How would I go about doing that? Quick demonstration:
<Row>
<Col xs={{span: 24}}>
<Row>
<Col xs={{span: 24}} ...>
<Input/>
</Col>
<Col xs={{span: 24}} ...>
<Input/>
</Col>
<Col xs={{span: 24}} ...>
<DateRangerPicker/>
</Col>
</Row>
</Col>
<Col xs={{span: 24}}>
<Button/>
</Col>
</Row>

It has gutter attribute, but btw it is 0 by default!

Align text next to link vertical center in MaterialUI Grid

I'm having trouble trying to get the count aligned center vertically with the link
<Grid container justify="flex-end">
<Grid alignItems="center" className={styles} direction="row" item justify="center">
<Link className={classes.allCompanies} to="/companies">view all companies</Link>
{companyCount && <span className={classes.companyCount}>({companyCount})</span>}
</Grid>
</Grid>
the count span is showing bottom aligned with the link (at least it appears that way to me, it should be a little higher up):

Problem with Autocomplete from Material ui in ReactJS

I am trying to implement an autocomplete to show suggestions in an input field and save the selection in the state so I googled to look for an AutoComplete library and found one from MaterialUI but I can't seem to get it to work.
I get both an error and a warning and can't quite wrap my head around how to solve them.
here's my code
<div className="App">
<h1>Please Tell Diagnostica more medical info about you.</h1>
<Container className='Diagnosis'>
<Autocomplete
id="combo-box-demo"
options={this.state.uuidFeatures}
getOptionLabel={(feature) => feature.text}
value={this.state.inputValue}}
onChange={this.handleInputChange}
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>
</Container>
</div >

Align Material UI Grid Items of different length

I currently have a material ui grid system that looks like the following:
<>
<Typography gutterBottom variant='h6'>
Add New User{' '}
</Typography>
<Grid container spacing={3} alignItems='center' justify='center'>
<Grid item>
<Typography variant='body2'>Full name</Typography>
</Grid>
<Grid item>
<TextField
style={{ width: 400 }}
fullWidth
margin='dense'
id='outlined-basic'
label='Full name'
variant='outlined'
/>
</Grid>
</Grid>
<Grid container spacing={3} alignItems='center' justify='center'>
<Grid item>
<Typography variant='body2'>Email</Typography>
</Grid>
<Grid item>
<TextField
style={{ width: 400 }}
fullWidth
margin='dense'
id='outlined-basic'
label='Email'
variant='outlined'
/>
</Grid>
</Grid>
</>
I am noticing that because email and full name are different lengths, the grid items do not align in the way I would like them to. They currently look like the following:
I would like the grid to look like the following:
Is there a way to align the grid items like the bottom picture without needing to add a fixed width? that seems to be the only solution I have found but I feel like I'm missing something regarding the grid system.
attached is a code sandbox https://codesandbox.io/s/affectionate-bhabha-ur9nm?file=/src/App.js for debugging

I've added xs={9} for text-field and xs={3} for the label with style={{ textAlign: 'right' }}(not familiar with material-ui so don't know if there's a better way to apply this).
This is the result: https://codesandbox.io/s/hungry-euclid-n7y8f

you just need to add xs sm lg to your Grid component to take advantage of Auto layout. accoording to the doc:
The Auto-layout makes the items equitably share the available space.
after applying this change, your items will be aligned properly. you can also check the corrected version here in the sandbox.