使用 mui 在 React 中更改 TextareaAutosize 颜色

Question

我是 React 的新手，正在使用 mui 组件。

当我尝试使用如下代码将颜色设置为 TextareaAutosize mui 组件时：

import * as React from 'react';
import TextareaAutosize from '@mui/material/TextareaAutosize';
import { blue } from '@mui/material/colors';

export default function EmptyTextarea() {
  return (
    <TextareaAutosize
      aria-label="empty textarea"
      placeholder="Empty"
      style={{ width: 200, color: blue, background: blue}}
      //Also not works: color="{blue}"
    />
  );
}

组件的颜色没有改变。

非常感谢！

Answer 1

<TextareaAutosize />呈现一个普通的HTMLTextAreaElement 。

这意味着这个 CSS 可以工作：

textarea {
  background-color: #222;
  color: #BADA55;
}

工作演示： https ://codesandbox.io/s/maxheighttextarea-material-demo-forked-5hc8nv?file=/index.css

如果您想将 CSS 限定到您的特定实例，请给它一个id并在 CSS 选择器中使用它。