在 React 的 textarea 中为 defaultValue 添加样式

Question

我正在使用名为 TextareaAutosize:

<TextareaAutosize
  minRows={2}
  style={resize: 'none'}
  defaultValue={<span style={{fontSize: "20px", color: "blue"}}>Content Body</span>}
/>

我没有在 TextareaAutosize 组件中获取内容正文，而是将其作为默认值：

如何为默认值添加样式？

编辑 Stack Blitz 上的代码：https://stackblitz.com/edit/react-fnx6we?file=demo.js

编辑：为了澄清起见，我只希望 defaultValue 具有我应用的样式。当用户开始键入或删除 defaultValue 并开始键入时，不应应用 defaultValue 的样式。

Answer 1

defaultValue 参数只接受字符串值。使用参数 style 来定义额外的样式。或者使用类似 jss 的组件样式（检查 @mui/styles）编辑：要“即时”更改元素的样式，您将需要使用其他变量和函数。在 Stack Blitz 上查看代码演示。

import React, { useState } from 'react';
import TextareaAutosize from '@mui/material/TextareaAutosize';
import { makeStyles } from '@mui/styles';

const useStyles = makeStyles({
  textAreaWithStyle: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
    fontSize: '20px',
    color: 'blue',
    resize: 'none',
  },
  textAreaWithoutStyle: {
    resize: 'none',
  },
});

export default function MaxHeightTextarea() {
  const classes = useStyles();
  const [valueOfInput, setValueOfInput] = useState('Default Text');

  const returnStyleBasedOnInput = () => {
    if (valueOfInput === 'Default Text') {
      return classes.textAreaWithStyle;
    } else {
      return classes.textAreaWithoutStyle;
    }
  };

  const checkIfDefaultValueInTextAreaAndRemooveIt = () => {
    if (valueOfInput === 'Default Text') {
      setValueOfInput('');
    }
  };

  const onInputChange = (e) => {
    setValueOfInput(e.target.value);
  };

  return (
    <TextareaAutosize
      maxRows={4}
      className={returnStyleBasedOnInput()}
      value={valueOfInput}
      onChange={onInputChange}
      onClick={checkIfDefaultValueInTextAreaAndRemooveIt}
    />
  );
}

在 Stack Blitz 上编辑代码：https://stackblitz.com/edit/react-fnx6we-3vdn7i?file=demo.js

在 React 的 textarea 中为 defaultValue 添加样式

Add styling to defaultValue in textarea in React

css

textarea

styling

autosize

reactjs