Неверное выравнивание метки ввода материала-интерфейса

Question

У меня проблема с метками TextField и неправильным отображением текста заполнителя в пользовательском интерфейсе Material. Я не уверен, почему это происходит, поскольку я скопировал и вставил прямо из демонстрации 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

Ну, будучи глупым новичком, я понял, что это из-за стилизации меток в моем приложении. css. После блокировки приведенного ниже кода в моем приложении. css метки вернулись в нормальное состояние.

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