Question: Suppose I have a local file called "contacts.json" . I want to insert it in react component and create a table . I'll be so glad if anybody can help me .Thanks .

```
{
  "contacts": [
  {
  "id": 1,
  "firstName": "hamid",
  "lastName": "mohamadi",
  "contactType": "Friend",
  "birthDate": "2010.10.10",
  "phoneNumber": [
    "09011019011",
    "09120658719"
  ],
  "email": [
    "mohammadi842@gmail.com",
    "h_mohammadi842@yahoo.com"
  ]
}

```

}

Answer: 
When you use the `disabled` property, Material-UI places the `Mui-disabled` class on many different elements. To get the equivalent look, you need to add it to all the same elements.

Below is an example of how to do this. In addition to adding the `Mui-disabled` class, it is also necessary to override the ["focused" styling](https://github.com/mui-org/material-ui/blob/v4.5.0/packages/material-ui/src/Input/Input.js#L30) of the underline (handled via the `:after` pseudo-class).

```
import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";
const disabledClassNameProps = { className: "Mui-disabled" };
const useStyles = makeStyles(theme => {
  const light = theme.palette.type === "light";
  const bottomLineColor = light
    ? "rgba(0, 0, 0, 0.42)"
    : "rgba(255, 255, 255, 0.7)";
  return {
    underline: {
      "&.Mui-disabled:after": {
        borderBottom: `1px dotted ${bottomLineColor}`,
        transform: "scaleX(0)"
      }
    }
  };
});
function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <TextField
        {...disabledClassNameProps}
        inputProps={{ readOnly: true }}
        InputProps={{ ...disabledClassNameProps, classes }}
        InputLabelProps={disabledClassNameProps}
        FormHelperTextProps={disabledClassNameProps}
        label="Test Disabled Look"
        defaultValue="Some Text"
        helperText="Helper Text"
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

```

[![Edit TextField readOnly looking disabled](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/textfield-readonly-looking-disabled-gsktd?fontsize=14)

Related answers:

* [Altering multiple component roots for MUI Textfield](https://stackoverflow.com/questions/57917743/altering-multiple-component-roots-for-mui-textfield/57926379#57926379)
* [How can I remove the underline of TextField from Material-UI?](https://stackoverflow.com/questions/57914368/how-can-i-remove-the-underline-of-textfield-from-material-ui/57915357#57915357)
* [How do I custom style the underline of Material-UI without using theme?](https://stackoverflow.com/questions/56023814/how-do-i-custom-style-the-underline-of-material-ui-without-using-theme/56026253#56026253)
You need to use classes on TextField

```
<TextField
 {...props}
 classes={readOnly ? { root: 'Mui-disabled' } : {}}
/>

```

Hope it helps