Material-UI轮廓输入标签不正确对齐

Question

我在使用Material UI的TextField标签和占位符文本呈现时遇到问题。我不确定为什么会这样，因为我是直接从Material-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>
    </>
  )
}

Answer 1

嗯，作为一个愚蠢的初学者，我已经意识到这是由于App.css中的标签样式所致。在我的App.css中屏蔽了以下代码后，标签恢复了正常状态。

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