Material-UI — это популярная библиотека компонентов React, которая предоставляет набор готовых компонентов пользовательского интерфейса, включая компонент TextField. По умолчанию компонент TextField Material-UI имеет подчеркивание, которое не всегда соответствует желаемому визуальному стилю приложения. В этой статье мы рассмотрим различные методы удаления подчеркивания из текстовых полей Material-UI, сопровождаемые примерами кода.

Метод 1: использование свойства InputProps
Один простой способ удалить подчеркивание — использовать свойство InputProps, предоставляемое компонентом TextField. Установив для свойства disableUnderline значение true, мы можем добиться желаемого эффекта. Вот пример:

import React from 'react';
import TextField from '@material-ui/core/TextField';
const MyTextField = () => {
  return (
    <TextField
      label="No Underline"
      InputProps={{
        disableUnderline: true,
      }}
    />
  );
};
export default MyTextField;

Метод 2: переопределение CSS с помощью makeStyles
Material-UI предоставляет мощное решение для стилизации под названием makeStyles. Это позволяет нам легко переопределить стили CSS компонентов по умолчанию. Нацелившись на «корневой» класс компонента TextField и установив для стиля подчеркивания значение «нет», мы можем удалить подчеркивание. Вот пример:

import React from 'react';
import TextField from '@material-ui/core/TextField';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
  root: {
    '& .MuiInput-underline': {
      borderBottom: 'none',
    },
  },
});
const MyTextField = () => {
  const classes = useStyles();
  return (
    <TextField
      label="No Underline"
      className={classes.root}
    />
  );
};
export default MyTextField;

Метод 3: настройка темы
Material-UI предлагает возможность создания тем, которая позволяет нам настраивать стили компонентов по умолчанию глобально. Мы можем переопределить свойства палитры темы, чтобы удалить подчеркивание. Вот пример:

import React from 'react';
import TextField from '@material-ui/core/TextField';
import { createTheme, ThemeProvider } from '@material-ui/core/styles';
const theme = createTheme({
  overrides: {
    MuiInput: {
      underline: {
        '&:before': {
          borderBottom: 'none',
        },
      },
    },
  },
});
const MyTextField = () => {
  return (
    <ThemeProvider theme={theme}>
      <TextField
        label="No Underline"
      />
    </ThemeProvider>
  );
};
export default MyTextField;

В этой статье мы рассмотрели три различных метода удаления подчеркивания из текстовых полей Material-UI. Используя свойство InputProps, переопределяя CSS с помощью makeStyles или настраивая тему, вы можете добиться желаемого стиля для своих текстовых полей. Поэкспериментируйте с этими методами, чтобы создавать визуально привлекательные и настраиваемые формы в ваших приложениях React с помощью Material-UI.

Не забудьте выбрать метод, который лучше всего соответствует требованиям и предпочтениям вашего проекта. Приятного кодирования!