reactjs - Material-UI Outlined 输入标签对齐不正确

Question

我遇到了一个问题，TextField 标签和占位符文本在 Material UI 中呈现不正确。我不确定为什么会发生这种情况，因为我直接从 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;
} */