Table of Contents

1. HOW TO ADD MAX AND MIN LIMIT TO THE MATERIAL UI (MUI) TEXTFIELD COMPONENT

We can use the inputProps for setting the min and max value on the TextField.

Below is the example with the TextField of type=date. We are setting the max value to the current date so that user cannot select the future date.Similarly, min value can also be set.

Moment Js is used for setting the current date as max value. You can also set the current date using Vanilla Javascript with different ways.

Also read about add and subtract operation on current datetime in javascript.

import TextField from "@mui/material/TextField";
import moment from "moment";

const minMaxTextField = () => {
  return (
    
      <TextField
        type="date"
        inputProps={{ max: moment().format("YYYY-MM-DD") }}
      />
    
  );
};

export default minMaxTextField;

import TextField from "@mui/material/TextField";

import moment from "moment";

const minMaxTextField = () => {

return (

<TextField

type="date"

inputProps={{ max: moment().format("YYYY-MM-DD") }}

);

};

export default minMaxTextField;

You can also read here about very popular component of MUI called Autocomplete which also take use of TextField component as a nested component.

You can apply the above customization in the Autocomplete component also.

Read this article on how to remove the up and down arrow from input type number and how to prevent non-numeric value.

2. HOW TO GET PLACEHOLDER IN MATERIAL UI (MUI) SELECT COMPONENT

There are two attributes which we need to use to get the placeholder – displayEmpty and renderValue.

Below is the working example

import { Select, Typography, MenuItem } from "@mui/material";
import {useState} from "react";

export default function App() {
  const [companyName, handleCompanyChanges] = useState("");

  return (
    <Select
      variant="outlined"
      fullWidth
      onChange={(event) => handleCompanyChanges(event.target.value)}
      value={companyName ?? ""}
      displayEmpty
      renderValue={(value) => {
        if (!value) {
          return (
            <Typography component="span" color="#989898">
              Please select company name
            </Typography>
          );
        }
        return value;
      }}
    >
      <MenuItem value="Asia">Asia</MenuItem>
      <MenuItem value="Africa">Africa</MenuItem>
      <MenuItem value="Europe">Europe</MenuItem>
    </Select>
  );
}

import { Select, Typography, MenuItem } from "@mui/material";

import {useState} from "react";

export default function App() {

const [companyName, handleCompanyChanges] = useState("");

return (

<Select

variant="outlined"

fullWidth

onChange={(event) => handleCompanyChanges(event.target.value)}

value={companyName ?? ""}

displayEmpty

renderValue={(value) => {

if (!value) {

return (

Please select company name

</Typography>

);

}

return value;

}}

<MenuItem value="Africa">Africa</MenuItem>

<MenuItem value="Europe">Europe</MenuItem>

</Select>

);

}

3. HOW TO DISABLE THE HOVER EFFECT OR THE BACKGROUND EFFECT OF THE IconButton COMPONENT

This disableRipple props is used with many MUI components to remove the background effects of the component.

Similarly, whenever we use the IconButton component with any MUI icon, the icon gets the circular background effect when we hover over the icon or click the icon.

 <IconButton disableRipple>
   <DeleteOutlineIcon/>
 </IconButton>

</IconButton>

Must Read - Related Posts For You:

Customize MUI Components | Custom Style Material UI With React

1. HOW TO ADD MAX AND MIN LIMIT TO THE MATERIAL UI (MUI) TEXTFIELD COMPONENT

2. HOW TO GET PLACEHOLDER IN MATERIAL UI (MUI) SELECT COMPONENT

3. HOW TO DISABLE THE HOVER EFFECT OR THE BACKGROUND EFFECT OF THE IconButton COMPONENT

Must Read - Related Posts For You:

Leave a Reply Cancel reply