如何访问MUI TextField样式？实现可嵌套子元素的仿TextArea容器

当然可以从MUI的theme中获取TextField/TextArea的样式，以此打造一个能容纳任意子元素的同款容器。核心思路是复用MUI内置OutlinedInput组件的样式规则（TextField的边框、悬浮效果都来自这个底层组件），结合styled()函数改造div。

具体实现代码 #

import { styled, Theme } from '@mui/material/styles';

// 自定义容器组件，复用OutlinedInput的样式逻辑
const TextAreaLikeContainer = styled('div')(({ theme }) => {
  // 从theme中提取OutlinedInput的默认样式变量
  const borderColorDefault = theme.palette.mode === 'light' 
    ? theme.palette.grey[300] 
    : theme.palette.grey[700];
  const borderColorHover = theme.palette.primary.main;
  const focusShadow = `0 0 0 2px ${theme.palette.primary.main}33`;

  return {
    // 基础样式匹配TextArea
    padding: theme.spacing(2),
    minHeight: '100px',
    borderRadius: theme.shape.borderRadius,
    border: `1px solid ${borderColorDefault}`,
    transition: theme.transitions.create(['border-color', 'box-shadow']),
    cursor: 'text',
    pointerEvents: 'auto',
    boxSizing: 'border-box',

    // 悬浮效果
    '&:hover': {
      borderColor: borderColorHover,
    },

    // 聚焦效果
    '&.Mui-focused': {
      borderColor: borderColorHover,
      boxShadow: focusShadow,
      outline: 'none',
    },

    // 子元素布局适配
    '& > *': {
      width: '100%',
      boxSizing: 'border-box',
      margin: '4px 0',
    },
  };
});

// 使用示例
export default function CustomContainer() {
  return (
    <TextAreaLikeContainer>
      <div>这里可以放任意React元素</div>
      <button>交互按钮</button>
      <p>多行段落文本</p>
      <input type="checkbox" id="test" />
      <label htmlFor="test">复选框选项</label>
    </TextAreaLikeContainer>
  );
}

关键说明 #

• theme样式复用：直接基于theme的调色板、形状、过渡动画等变量定义样式，确保容器和项目中已定制的TextField/TextArea外观完全统一。
• 状态对齐：实现了hover和focus状态的样式变化，和原生组件的交互效果完全一致。
• 子元素兼容：通过盒模型设置确保任意子元素都能在容器内正常布局，不会出现溢出或贴边问题。
• 交互性保障：pointerEvents: auto保证容器内的子元素能正常响应点击、输入等交互事件。

如果你的项目中已经自定义过MuiOutlinedInput的样式，只需把代码中对应的样式变量替换为theme中components.MuiOutlinedInput.styleOverrides里的自定义规则即可。

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