Reactjs 物料UI轮廓输入标签对齐不正确

我在材质UI中的文本字段标签和占位符文本呈现错误方面遇到问题。我不知道为什么会发生这种情况，因为我直接从材料UI演示中复制和粘贴。我曾在阅读其他文章时尝试过在InputProps和InputLabelProps中混用字体大小，但这些都不起作用。无论出于何种原因，标签和占位符未在输入字段或轮廓中居中

以下是我的组件代码：

import React, {useState, useContext} from 'react'
import { GlobalContext } from '../context/GlobalState';

// UI for Text Field
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const useStyles = makeStyles(theme => ({
        root: {
          '& .MuiTextField-root': {
          margin: theme.spacing(1),
          width: 320,
        },
    },
}));

export const AddTransaction = () => {
  const classes = useStyles();

  const [text, setText] = useState('');
  const [amount, setAmount] = useState();

  const { addTransaction } = useContext(GlobalContext);

  const onSubmit = e => {
    e.preventDefault();

    const newTransaction = {
      text,
      amount: +amount
    }

    addTransaction(newTransaction);
    }

  return (
    <>
      <h3 align='center'>Add new transaction</h3>
      <form className={classes.root} noValidate autoComplete="off" onSubmit={onSubmit}>
          <TextField
            id="Transaction Name"
            label="Transaction Name"
            variant="outlined"
            size="small"
            type="text"
            margin="dense"
            onChange={(e) => setText(e.target.value)}
            value={text}
            required = {true}
            //placeholder="Transaction Name"
            // InputLabelProps={{
            //   shrink: true, 
            //   style: {fontSize: 12}
            // }}
            // inputProps={{
            //   style: {fontSize: 16} 
            // }}
            // //autoFocus={true}
          />      
          <TextField
            id="Amount"
            label="Amount"
            variant="outlined"
            size="small"
            type="number"
            margin="dense"
            onChange={(e) => setAmount(e.target.value)}
            value={amount}
            required = {true}
            // InputLabelProps={{ 
            //   shrink: true, 
            //   style: {fontSize: 16}
            // }}
            // inputProps={{
            //   style: {fontSize: 12} 
            // }}
            // margin="normal"
            // autoFocus={true}
          />  
          </form>     
        <div>
        <button className="btn">Add transaction</button>
        </div>
    </>
  )
}

import React，{useState，useContext}来自“React”
从“../context/GlobalState”导入{GlobalContext}；
//文本字段的用户界面
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/TextField”导入TextField；
const useStyles=makeStyles（主题=>({
根目录：{
“&.MuiTextField根”：{
边距：主题。间距（1），
宽度：320，
},
},
}));
export const AddTransaction=（）=>{
const classes=useStyles（）；
const[text，setText]=useState（“”）；
const[amount，setAmount]=useState（）；
const{addTransaction}=useContext（GlobalContext）；
const onSubmit=e=>{
e、 预防默认值（）；
常数newTransaction={
文本，
金额：+金额
}
addTransaction（新交易）；
}
返回(
添加新事务
setText（e.target.value）}
值={text}
必需={true}
//占位符=“事务名称”
//输入道具={{
//心理医生：是的，
//样式：{fontSize:12}
// }}
//输入道具={{
//样式：{fontSize:16}
// }}
////自动对焦={true}
/>      
setAmount（e.target.value）}
值={amount}
必需={true}
//InputLabelProps={{
//心理医生：是的，
//样式：{fontSize:16}
// }}
//输入道具={{
//样式：{fontSize:12}
// }}
//margin=“正常”
//自动对焦={true}
/>  
添加事务
)
}

作为一个愚蠢的初学者，我意识到这是由于App.css中的标签样式造成的。在我的App.css中屏蔽了下面的代码后，标签恢复正常

/* label {
  display: inline-block;
  margin: 10px 0;
} */