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.
Try wrapping it (like in the example: https://material-ui.com/components/pickers/): import React, { Fragment, useState } from “react”; import DateFnsUtils from ‘@date-io/date-fns’; import { DateTimePicker, MuiPickersUtilsProvider } from “@material-ui/pickers”; function BasicDateTimePicker() { const [selectedDate, handleDateChange] = useState(new Date()); return ( <MuiPickersUtilsProvider utils={DateFnsUtils}> <DateTimePicker label=”DateTimePicker” inputVariant=”outlined” value={selectedDate} onChange={handleDateChange} /> <DateTimePicker autoOk ampm={false} disableFuture value={selectedDate} onChange={handleDateChange} label=”24h clock” /> … Read more
Update versions: material-ui 0.20.2, react-input-mask 2.0.4 Seems like the API changed a bit: <InputMask mask=”(0)999 999 99 99″ value={this.state.phone} disabled={false} maskChar=” ” > {() => <TextField />} </InputMask> Demo Original This should do the trick: <TextField ref=”phone” name=”phone” type=”text” value={this.state.phone} onChange={this.onChange} > <InputMask mask=”(0)999 999 99 99″ maskChar=” ” /> </TextField> Demo:
You have to install the lab package: npm install @material-ui/lab
Try using colgroup, worked for me in Material-UI V1 <Table> <colgroup> <col style={{width:’10%’}}/> <col style={{width:’20%’}}/> <col style={{width:’70%’}}/> </colgroup> <TableHead> <TableRow> <TableCell>Head1</TableCell> <TableCell>Head2</TableCell> <TableCell>Head3</TableCell> </TableRow> </TableHead> <TableBody> <TableRow> <TableCell>Data1</TableCell> <TableCell>Data2</TableCell> <TableCell>Data3</TableCell> </TableRow> </TableBody> </Table>
As mentioned by Soothran in the comments, this is controlled by the bottom border of TableCell. Below is one way to customize this. import MuiTableCell from “@material-ui/core/TableCell”; const TableCell = withStyles({ root: { borderBottom: “none” } })(MuiTableCell);
You are close with the second block of code. I found that you could simply create 2 distinct Grid sections such as: <div> <Grid id=”top-row” container spacing={24}> <Grid item xs={4}> <Paper className={classes.paper}>Grid cell 1, 1</Paper> </Grid> <Grid item xs={4}> <Paper className={classes.paper}>Grid cell 2, 1</Paper> </Grid> </Grid> <Grid id=”bottom-row” container spacing={24}> <Grid item xs={4}> <Paper className={classes.paper}>Grid … Read more
I got the same error. And, the following worked for me. getOptionLabel={(option) => option.name || “”}
You can use the component prop of Material-UI’s Link to integrate with Link in react-router-dom. You can do the same thing with Material-UI’s Button. Here’s an example showing both: import React from “react”; import { Route } from “react-router”; import { BrowserRouter as Router, Link as RouterLink } from “react-router-dom”; import Link from “@material-ui/core/Link”; import … Read more
Or you can try createMuiTheme and customize the following property: import { createMuiTheme } from ‘@material-ui/core/styles’ const theme = createMuiTheme({ palette: { action: { disabledBackground: ‘set color of background here’, disabled: ‘set color of text here’ } } }