使用 mui 在 React 中更改 TextareaAutosize 颜色

Question

I'm new at React and using mui components.

While I'm trying to set color to TextareaAutosize mui component with code like this:

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}"
    />
  );
}

the color of the component not changed.

Thanks a lot!

Answer 1

<TextareaAutosize /> renders a plain HTMLTextAreaElement .

Which means this CSS will work:

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

Working demo: https://codesandbox.io/s/maxheighttextarea-material-demo-forked-5hc8nv?file=/index.css

If you want to scope the CSS to your particular instance, give it an id and use it in the CSS selector.