如何使用styled-components为Material-UI TextField的textarea设置宽度

要单独控制TextField中用户输入的textarea区域宽度，需要通过styled-components的嵌套选择器定位到内部的textarea元素，具体步骤如下：

1. 确保TextField启用多行模式 #

只有设置multiline属性时，TextField内部才会渲染textarea（默认是单行input），先修改组件代码：

import * as React from "react";
import Box from "@mui/material/Box";
import { StyledTextField } from "./styles";

export default function BasicTextFields() {
  return (
    <Box component="form">
      <StyledTextField
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
        multiline  // 开启多行模式，触发textarea渲染
        rows={4}   // 设置默认显示行数
      />
    </Box>
  );
}

2. 使用styled-components嵌套选择器设置textarea宽度 #

在样式文件中，通过嵌套选择器定位到内部的textarea元素，有两种常用方式：

方式一：针对textarea标签（通用所有变体） #

直接选中textarea标签设置样式，无需依赖Material-UI的类名：

import styled from "styled-components";
import TextField from "@mui/material/TextField";

export const StyledTextField = styled(TextField)`
  textarea {
    width: 400px;
    // 可选：确保宽度包含padding和边框，避免溢出
    box-sizing: border-box;
  }
`;

StyledTextField.displayName = "StyledTextField";

方式二：通过Material-UI内置类名定位（精准控制） #

如果需要针对特定变体的输入框，比如outlined样式的多行输入框，可以使用Material-UI的类名.MuiOutlinedInput-inputMultiline：

import styled from "styled-components";
import TextField from "@mui/material/TextField";

export const StyledTextField = styled(TextField)`
  .MuiOutlinedInput-inputMultiline {
    width: 400px;
    // 可选：自定义内边距
    padding: 12px 14px;
  }
`;

StyledTextField.displayName = "StyledTextField";

注意事项 #

• 如果同时设置了TextField容器的width，textarea默认会继承容器宽度；若单独设置textarea宽度，会覆盖继承值。
• 使用box-sizing: border-box可以避免textarea的padding和边框导致宽度超出预期。

内容的提问来源于stack exchange，提问作者Happy1234