CssBaseline is the component that controls this aspect. If you aren’t using CssBaseline, then you are just seeing the default provided by the browser. Here is a working v4 example (v5 example further down): import React from “react”; import ReactDOM from “react-dom”; import CssBaseline from “@material-ui/core/CssBaseline”; import { MuiThemeProvider, createMuiTheme } from “@material-ui/core/styles”; import Button … Read more
Add two props fullWidth and maxWidth=”md” in your Dialog component like this : <Dialog {…your_other_props} fullWidth maxWidth=”sm” > {/* Your dialog content */} </Dialog> You can change md to sm, xs, lg and xl as per your requirement.
You can do it like this: import { withStyles } from “@material-ui/core/styles”; const styles = theme => ({ root: { backgroundColor: “red” } }); class ClassComponent extends Component { state = { searchNodes: “” }; render() { const { classes } = this.props; return ( <div className={classes.root}>Hello!</div> ); } } export default withStyles(styles, { withTheme: … Read more
I had the same error and solved it by first asking if the array existed. Example: <Filter> { product.color?.map((c) => ( <FilterColor color = {c} key = {c} /> ))}; </Filter>
The other popular answer (by André Junges) on this question is for the 0.x versions of Material-UI. Below I’ve copied in my answer from Material UI’s Tooltip – Customization Style which addresses this for v3 and v4. Further down, I have added a version of the example using v5. Below are examples of how to … Read more
I beleive the only way to achieve this right now is to use the ‘disableTypography’ prop of the ListItemText element. <ListItemText disableTypography primary={<Typography variant=”body2″ style={{ color: ‘#FFFFFF’ }}>MyTitle</Typography>} /> This lets you embed your own text element with whatever styling you want on it.
Okay, this is very easy, I don’t know why it was not working with me: Just do like this: import Button from ‘@material-ui/core/Button’; import { Link } from ‘react-router-dom’; <Button component={Link} to=”/about” variant=”contained” color=”primary”> About Page </Button> You can find more details at https://mui.com/material-ui/guides/routing/.
To make TextField work like a textarea you can use multiline prop. You can read more about TextFied and its props here. Example <TextField placeholder=”MultiLine with rows: 2 and rowsMax: 4″ multiline rows={2} maxRows={4} /> You can set maxRows={Infinity} if you want to scale your multiline input box with your content (regardless of the content … Read more
I had the same problem, found this in the github issues: https://github.com/mui-org/material-ui-pickers/issues/1440 so i installed “@date-io/date-fns”: “^1.3.13” and got it working
This is how my team went about including the Roboto fonts in our Webpack project: Download the Roboto fonts and make a CSS file in a font-specific folder Create a folder (/fonts). Download all of the Roboto fonts from Font Squirrel. Go to the Webfont Kit tab, then press the Download @font-face Kit button with … Read more