是否可以将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组件的文本更改为版式标题变体？

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