MaterialUI TextField: изменение цвета фона не работает должным образом

TextField отображает несколько элементов - внешний <div> для FormControl, а затем внутри него InputLabel и Элемент ввода (например, FilledInput).

Опора className на TextField применяет этот класс к FormControl. По умолчанию цвет фона для FilledInput rgba(0, 0, 0, 0.09), поэтому он все еще применялся к вашему голубому фону на FormControl.

Вместо этого вы можете переопределить цвет фона в FilledInput следующим образом:

import React from "react";
import TextField from "@material-ui/core/TextField";

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    "& .MuiFilledInput-root": {
      background: "rgb(232, 241, 250)"
    }
  }
}));

export default function InquiryContentInput(props) {
  const classes = useStyles();

  return (
    <TextField
      variant="filled"
      className={classes.root}
      fullWidth={true}
      multiline={true}
      rows={5}
      rowsMax={10}
      value={props.content}
      onChange={(e) => props.onChange(e.target.value)}
      label="Суть обращения"
    />
  );
}

Другой вариант - использовать InputProps, чтобы указать className для ввода:

import React from "react";
import TextField from "@material-ui/core/TextField";

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  input: {
    background: "rgb(232, 241, 250)"
  }
}));

export default function InquiryContentInput(props) {
  const classes = useStyles();

  return (
    <TextField
      variant="filled"
      InputProps={{ className: classes.input }}
      fullWidth={true}
      multiline={true}
      rows={5}
      rowsMax={10}
      value={props.content}
      onChange={(e) => props.onChange(e.target.value)}
      label="Суть обращения"
    />
  );
}

Просто следующий вопрос: если бы я хотел изменить цветовую схему фона в этом TextField при фокусировке и наведении курсора, сделал бы я это с помощью некоторого переопределения класса в makeStyles? И что бы это было или где я мог бы найти названия этих классов?

Есть два основных способа определить названия классов:

1. Изучите элементы в инструментах разработчика браузера, чтобы увидеть классы, добавленные Material-UI.

2. Посмотрите исходный код. Это требует понимания того, как генерируются имена классов CSS Material-UI.

В FilledInput, вы можете найти следующие определенные стили (упрощенные ниже, чтобы включить только стили цвета фона):

export const styles = (theme) => {
  const light = theme.palette.type === 'light';
  const backgroundColor = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)';

  return {
    /* Styles applied to the root element. */
    root: {
      backgroundColor,
      transition: theme.transitions.create('background-color', {
        duration: theme.transitions.duration.shorter,
        easing: theme.transitions.easing.easeOut,
      }),
      '&:hover': {
        backgroundColor: light ? 'rgba(0, 0, 0, 0.13)' : 'rgba(255, 255, 255, 0.13)',
        // Reset on touch devices, it doesn't add specificity
        '@media (hover: none)': {
          backgroundColor,
        },
      },
      '&$focused': {
        backgroundColor: light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)',
      },
      '&$disabled': {
        backgroundColor: light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)',
      },
    },

Ключи в этой структуре (например, root) будут преобразованы в имена классов с общим шаблоном Mui${componentName}-${styleRuleKey} (например, MuiFilledInput-root). Псевдоклассы (например, $focused, $disabled) задокументированы здесь и имеют префиксы с Mui- (например, Mui-focused, Mui-disabled).

Вы можете переопределить цвета при наведении и фокусировке, следуя той же схеме, что и в исходном коде FilledInput:

import React from "react";
import TextField from "@material-ui/core/TextField";

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    "& .MuiFilledInput-root": {
      backgroundColor: "rgb(232, 241, 250)"
    },
    "& .MuiFilledInput-root:hover": {
      backgroundColor: "rgb(250, 232, 241)",
      // Reset on touch devices, it doesn't add specificity
      "@media (hover: none)": {
        backgroundColor: "rgb(232, 241, 250)"
      }
    },
    "& .MuiFilledInput-root.Mui-focused": {
      backgroundColor: "rgb(250, 241, 232)"
    }
  }
}));

export default function InquiryContentInput(props) {
  const classes = useStyles();

  return (
    <TextField
      variant="filled"
      className={classes.root}
      fullWidth={true}
      multiline={true}
      rows={5}
      rowsMax={10}
      value={props.content}
      onChange={(e) => props.onChange(e.target.value)}
      label="Суть обращения"
    />
  );
}

У меня есть еще один дополнительный вопрос. Если бы я хотел определить эти значения в теме (например, MuiFilledInput для всех состояний, включая наведение и фокус), как бы я это сделал? Я смог добавить его в обычное состояние прямо сейчас, добавив: const theme = createMuiTheme({ "overrides": { "MuiFilledInput": { "root": { "backgroundColor": 'rgb(232, 241, 250)' } } } }) Но я не могу добавить пользовательские значения фона в тему для наведения и фокуса

Вот синтаксис для выполнения тех же стилей в теме:

import React from "react";
import TextField from "@material-ui/core/TextField";

import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";

const theme = createMuiTheme({
  overrides: {
    MuiFilledInput: {
      root: {
        backgroundColor: "rgb(232, 241, 250)",
        "&:hover": {
          backgroundColor: "rgb(250, 232, 241)",
          // Reset on touch devices, it doesn't add specificity
          "@media (hover: none)": {
            backgroundColor: "rgb(232, 241, 250)"
          }
        },
        "&.Mui-focused": {
          backgroundColor: "rgb(250, 241, 232)"
        }
      }
    }
  }
});

export default function InquiryContentInput(props) {
  return (
    <ThemeProvider theme={theme}>
      <TextField
        variant="filled"
        fullWidth={true}
        multiline={true}
        rows={5}
        rowsMax={10}
        value={props.content}
        onChange={(e) => props.onChange(e.target.value)}
        label="Суть обращения"
      />
    </ThemeProvider>
  );
}