React原生文本输入将文本放在输入的底部

import React from 'react';
import './styles.css';

function TextInput() {
  return (
    <div className="input-container">
      <textarea className="text-input" placeholder="请输入文本..."></textarea>
    </div>
  );
}

export default TextInput;

/* styles.css */
.input-container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  height: 100px; /* 设置容器高度 */
}

.text-input {
  width: 100%;
  height: 100%;
  resize: none; /* 禁止调整大小 */
  box-sizing: border-box; /* 包含内边距和边框 */
}

import React from 'react';
import './styles.css';

function TextInput() {
  return (
    <div>
      <textarea className="text-input" placeholder="请输入文本..."></textarea>
    </div>
  );
}

export default TextInput;

/* styles.css */
.text-input {
  width: 100%;
  height: 100px;
  resize: none;
  box-sizing: border-box;
  vertical-align: middle; /* 垂直居中对齐 */
}

import React from 'react';
import './styles.css';

function App() {
  return (
    <div className="app">
      <TextInput />
    </div>
  );
}

function TextInput() {
  return (
    <div className="input-container">
      <textarea className="text-input" placeholder="请输入文本..."></textarea>
    </div>
  );
}

export default App;

/* styles.css */
.app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.input-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 100px;
  border: 1px solid #ccc;
}

.text-input {
  width: 100%;
  height: 100%;
  resize: none;
  box-sizing: border-box;
  padding: 10px;
  border: none;
}