I tried all the above solutions and nothing worked. Perhaps the API has changed since then. I finally figured out a solution. It’s not so elegant, but in principle it makes sense. In my case the options are objects. I just had to set the “value” prop using the exact item from my options array. … Read more
It simply adds a minimum height to an element. It’s useful when you use the AppBar with a content section below, and you want to add a spacer at the top of your content so it doesn’t disappear under the AppBar, for example. I can’t find specific documentation on it, but there are examples of … Read more
Correct answer you should find in documentation. For the property rowsPerPageOptions one says: Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed. So you have to specify rowsPerPageOptions={[]}, that’s all folks. The documentations could be found here.
Give this a try _document.js import React from ‘react’; import Document, { Head, Main, NextScript } from ‘next/document’; import { ServerStyleSheet } from ‘styled-components’ import { ServerStyleSheets } from ‘@material-ui/styles’; import theme from ‘../src/theme’; class MyDocument extends Document { static async getInitialProps (ctx) { const styledComponentsSheet = new ServerStyleSheet() const materialSheets = new ServerStyleSheets() const … Read more
Try adding childContextTypes in the mount options: return mount( <SearchBar {…props} />, { context: {muiTheme}, childContextTypes: {muiTheme: React.PropTypes.object} } ); By doing it you set the Enzyme wrapper to make the muiTheme available to it’s children through the context.
Using a react component state, one can store the TextField value and use that as an indicator for an error. Material-UI exposes the error and helperText props to display an error interactively. Take a look at the following example: <TextField value={this.state.text} onChange={event => this.setState({ text: event.target.value })} error={text === “”} helperText={text === “” ? ‘Empty … 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.
String refs are deprecated and material-ui does not support using them. I recommend reading: https://reactjs.org/docs/refs-and-the-dom.html Also to get a ref to the <input /> element you should use the inputRef prop. Read about it here. If your React is up to date you should use createRef or the useRef hook. Below are some examples // … Read more
You could define the label as a Typography component and apply the style there: <FormControlLabel control={<Checkbox value=”Hello” color=”primary” />} label={<Typography style={styles.formControlLabel}>World</Typography>} /> UPDATE: As per Saber’s comment, newer versions should instead use: <FormControlLabel control={<Checkbox value=”Hello” color=”primary” />} label={<Typography className={styles.formControlLabel}>World</Typography>} />
The warnings are caused by this line in your demo.js file: <Items {…this.props} items={items} /> You’re spreading all of List‘s props down into your Items. One of these props is classes, containing all of the CSS classes you define in demo.js. Since those are intended for List, they include CSS classes that are implemented by … Read more