如何移除Joy UI中Textarea组件聚焦状态下的轮廓线？

我尝试移除Textarea组件的轮廓线，但操作无效，当前效果为文本框聚焦时仍显示轮廓线。我已尝试以下代码：

<Textarea className={style.textarea} 
sx={{outline:'none', border:'none',
'&:focus':{outline:'none', border:'none'}}}/>

/* CSS文件中 */
.textarea:focus {
  outline:none,
  border:none
}

问题分析及解决办法 #

• 修正CSS语法错误：你CSS代码里用逗号分隔属性是语法错误，必须改用分号，先修复这个基础问题：

.textarea:focus {
  outline: none;
  border: none;
}

• 针对MUI组件的特殊处理：如果是MUI的Textarea组件，它的聚焦样式默认用box-shadow而非单纯的outline，且内置样式优先级较高，试试在sx属性里补充boxShadow: 'none'：

<Textarea 
  className={style.textarea} 
  sx={{
    border: 'none',
    outline: 'none',
    '&:focus': {
      border: 'none',
      outline: 'none',
      boxShadow: 'none', // 移除MUI默认的聚焦阴影效果
    }
  }}
/>

• 提升CSS选择器优先级：如果用外部CSS文件，使用更具体的选择器来覆盖内置样式：

textarea.textarea:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

（若仍无效可临时加!important，但优先用更具体的选择器或MUI原生方案）

• 使用MUI styled组件（推荐）：通过styled创建自定义Textarea，样式优先级更高，维护更方便：

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

const StyledTextarea = styled(TextareaAutosize)({
  width: '100%',
  padding: '8px',
  border: 'none',
  outline: 'none',
  '&:focus': {
    border: 'none',
    outline: 'none',
    boxShadow: 'none',
  },
});

// 组件使用示例
<StyledTextarea placeholder="输入内容..." />

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