I had same problem. In my case i had an AppBar with transparent background and a Scaffold with extendBodyBehindAppBar set to true. I tried with shadowColor and surfaceTintColor with Colors.transparent value, but the shadow was still visible. Then I noticed the scrolledUnderElevation property of AppBar. Setting it to 0.0 was the solution.
I suspect the Container component is causing you problems. Since you haven’t linked its implementation, see below for a working example of what you want. Since Material uses flexbox they make use of property flexGrow The flex-grow CSS property specifies the flex grow factor of a flex item. It specifies what amount of space inside … Read more
You can put a <form> inside the Dialog, but you must also put your {actions} inside the form, instead of the actions property. Your Submit action button should have type=”submit” on it (type=”reset” is also supported, and shown below). jsFiddle: https://jsfiddle.net/14dugwp3/6/ const { Dialog, TextField, FlatButton, MuiThemeProvider, getMuiTheme, } = MaterialUI; class Example extends React.Component … Read more
If you are doing something a one-off styling, you can use the inline style, it worked for me. <FormControl style={{minWidth: 120}}> // this line <InputLabel htmlFor=”selected-language”>Language</InputLabel> <Select value={this.state.selectedLanguage} onChange={(e) => this.onLanguageChange(e.target.value)} inputProps={{ name: ‘language’, id: ‘selected-language’, }}> {menuItems} </Select> </FormControl> If you would reuse it in more code and want to avoid code duplication, you … Read more
@emotion/react and @emotion/styled are peer dependencies of many mui packages, ie @mui/material. This gives us more freedom over which emotion version we would like to use, but does mean we must install the dependencies ourselves. npm i @emotion/react @emotion/styled
I was looking for a borderless text-field and this is working for me… <TextField variant=”standard” // <== changed this margin=”normal” required fullWidth id=”phoneNumber” name=”phoneNumber” autoComplete=”phoneNumber” autoFocus onChange={handlePhoneNumberChange} placeholder=”Phone Number” InputProps={{ startAdornment: <AccountCircle />, // <== adjusted this disableUnderline: true, // <== added this }} /> These 2 props seem to be the key… variant=”standard” InputProps={{ … Read more
another long overdue update: containerElement prop is not supported anymore, use component prop instead. Check out the document here. 2016 December Edit: the linkButton prop is deprecated, you will get a warning: Warning: Unknown props `linkButton` on <a> tag. So simply remove the prop: <MenuItem containerElement={<Link to=”/profile” />} primaryText=”Profile” leftIcon={ <FontIcon className=”material-icons”>people</FontIcon> } /> Here’s … Read more
Material UI v1, v3, and v4 are available on npm under @material-ui/core. Material UI v5 and above are available on npm under @mui/material. It’s the same library, but they changed the npm package name in version 5.
useRef is generic if you use it with TypeScript, so you can define the referenced element type like const ref = useRef<Type>(); Looking into the type definitions for the inputRef property in MaterialUI it states: /** * Pass a ref to the `input` element. */ inputRef?: React.Ref<any>; So for a fix you can define your … Read more
Yes, it’s possible. You need to use the component prop: import { Link } from ‘react-router-dom’; import BottomNavigation from ‘@material-ui/core/BottomNavigation’; import BottomNavigationAction from ‘@material-ui/core/BottomNavigationAction’; // …. <BottomNavigation value={value} onChange={this.handleChange}> <BottomNavigationAction component={Link} to=”/signal” label=”signal” value=”signal” icon={<ShowChart />} className={classes.content} /> </BottomNavigation> (the to prop is for React Router’s Link component) This works with any Material-UI component that … Read more