是否可以更改 material-ui TextField 组件的排版样式以使用标题变体？

Question

我正在尝试学习在 Typescript React 环境中使用的 material-ui。我在Dialog 中使用以下片段：

...
<React.Fragment>
    <Typography variant="body1">
    <Box mt={1}>Heading</Box>
    </Typography>
    <Grid container spacing={3 as GridSpacing}>
    <Grid item xs={12} sm={6}>
        <TextField
        label="MyTextField"
        InputProps={{ readOnly: true }}
        value={props.event.fromAction}
        fullWidth
        />
    </Grid>
    <Grid item xs={12} sm={6}>
        <TextField
        label="AnotherTextField"
        InputProps={{ readOnly: true }}
        value={props.event.request.sourceComponent}
        fullWidth
        />
    </Grid>
    </Grid>
</React.Fragment>
...

有没有人设法将 TextField 组件的文本更改为排版 caption 变体的样式？

Answer 1

这是一个如何做到这一点的示例：

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

import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  inputRoot: {
    fontSize: theme.typography.pxToRem(12),
    letterSpacing: "0.03333em",
    lineHeight: 1.66
  }
}));
function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <TextField
        defaultValue="test"
        InputProps={{ className: classes.inputRoot }}
      />
    </div>
  );
}

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

相关问题：How change default typography class of a formcontrollabel - material-ui | React?

用于查找 caption 样式属性的相关 Material-UI 代码 排版：https://github.com/mui-org/material-ui/blob/v4.5.2/packages/material-ui/src/styles/createTypography.js#L73