Пользовательский интерфейс материала удаляет желтый фон при автозаполнении TextField - PullRequest
Новая
       5

Пользовательский интерфейс материала удаляет желтый фон при автозаполнении TextField

0 голосов
/ 15 февраля 2019

Мне очень трудно удалить желтый фон автозаполнения из компонента TextField Material UI.

В старых версиях я делал это так: 

const inputStyle = { WebkitBoxShadow: '0 0 0 1000px white inset' };
<TextField
    ...
    inputStyle={inputStyle}
/>

Нов последней версии inputStyle реквизит был удален и вместо него добавлен InputProps.

Я пытался удалить его таким образом, но желтый фоновый цвет все еще появляется: enter image description here

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const styles = {
  root: {
    ':-webkit-autofill': {
        WebkitBoxShadow: '0 0 0 1000px white inset',
        backgroundColor: 'red !important'
    }
  },
  input: {
    ':-webkit-autofill': {
        WebkitBoxShadow: '0 0 0 1000px white inset',
        backgroundColor: 'red !important'
    }
  }
};

const renderTextField = (props) => {
    const {
        classes,
        label,
        input,
        meta: { touched, error },
        ...custom
    } = props;

  return (
    <TextField
        label={label}
        placeholder={label}
        error={touched && error}
        helperText={touched && error}
        className={classes.root}
        InputProps={{
            className: classes.input
        }}
        {...input}
        {...custom}
    />
  );
}

renderTextField.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(renderTextField);

1 Ответ

0 голосов
/ 15 февраля 2019

Замена для inputStyle будет inputProps: 

const inputStyle = { WebkitBoxShadow: "0 0 0 1000px white inset" };
<TextField name="last_name" inputProps={{ style: inputStyle }} />

InputProps против inputProps - распространенная точка недоразумения.Прописная буква «I» InputProps предоставляет реквизиты для элемента Input внутри TextField (Input переносит нативный input в div).Строчная буква «i» inputProps предоставляет реквизиты для собственного элемента input, отображаемого в компоненте Input.Если вы хотите предоставить встроенные стили для нативного элемента input, приведенный выше пример кода поможет вам.

Есть также несколько других способов сделать это, используя классы через withStyles.

Если вы хотите использовать свойство className, опять же оно должно быть в input (а не в div, обертывающем его), чтобы получить желаемый эффект.Таким образом, будет работать и следующее: 

const styles = {
  input: {
    WebkitBoxShadow: "0 0 0 1000px white inset"
  }
};
const MyTextField = ({classes}) => {
   return <TextField name="email" inputProps={{ className: classes.input }} />;
}
export default withStyles(styles)(MyTextField);

Если вы хотите использовать псевдокласс ": -webkit-autofill", вам просто нужно настроить синтаксис JSS и добавить "&"для ссылки на селектор родительского правила : 

const styles = {
  input: {
    "&:-webkit-autofill": {
      WebkitBoxShadow: "0 0 0 1000px white inset"
    }
  }
};
const MyTextField = ({classes}) => {
   return <TextField name="email" inputProps={{ className: classes.input }} />;
}
export default withStyles(styles)(MyTextField);

Вы также можете использовать любой из этих подходов к классу, но используя прописные буквы "I" InputProps через classes свойство: 

const styles = {
  input: {
    WebkitBoxShadow: "0 0 0 1000px white inset"
  }
};
const MyTextField = ({classes}) => {
   return <TextField name="email" InputProps={{ classes: { input: classes.input } }} />;
}
export default withStyles(styles)(MyTextField);

Вот рабочий пример со всеми этими подходами:

Edit rr9omj7q0p

...