如何從 Material UI TextField React 組件中刪除彎曲邊框和插入框陰影？

Question

這是輸入字段：

它有這個內部陰影和彎曲的邊界。

這是代碼：

import React, {Component} from 'react';
import TextField from 'material-ui/TextField';
import { connect } from 'react-redux';

class SearchInput extends Component {

    constructor(props) {
        super(props);
        this.state = {
            searchInputFieldValue: ''
        };
    }

    textFieldOnChangeSearch(event) {
        this.setState({searchInputFieldValue: event.target.value});
        this.props.phoneBookSearch(event.target.value);
    }

    render() {
        return (
            <div>
                <TextField
                    underlineShow={false}
                    hintText="Hae.."
                    onChange={this.textFieldOnChangeSearch.bind(this)}
                    value={this.state.searchInputFieldValue}
                    style={{
                        boxShadow: 'none',
                        height: '57px', 
                        width: '460px',
                        /*
                        borderStyle: 'solid',
                        borderColor: '#2375BB',
                        borderWidth: '2px',
                        */
                        backgroundColor: '#FFFFFF'
                    }}
                    />
            </div>
        )
    }
}

export default SearchInput;

這是它在瀏覽器的檢查中的顯示方式：

如果我取消注釋代碼中樣式的注釋部分，它會顯示如下：

如您所見，這是我想要的藍色邊框，但彎曲的邊框和內部陰影仍在背景中顯示。

如何刪除它們？ 甚至 box-shadow: none !important; 在網絡工具中不會刪除它。

Answer 1

請檢查應用boxShadow和borderRadius的元素。 當您找到它時，您可以相應地使用 Material UI Textfiled 的不同屬性並影響其樣式。

如果樣式在主元素上，那么您的樣式屬性應該有效。

我懷疑它位於input元素上，您可以使用TextField inputStyle屬性更改該元素。

還要檢查文檔以獲取更多元素特定的樣式屬性選項。

Answer 2

 #test { height: 50px; width: 300px; border: 2px solid red; } #test:focus { border: 2px solid black; border-radius: 0px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; }

 <input id ="test" type="text">

這可能有幫助

Answer 3

您可以將outline屬性定義為none ，同時focus於該input文本字段。

'&:focus': {
            outline: "none"
           },

這對我來說非常有用。 !!

Answer 4

在TextField組件中添加variant="outlined"和InputProps如下：

InputProps={{
  ...params.InputProps,
  classes: {
    notchedOutline: classes input
},
startAdornment: (
  <SearchIcon />
),

還要確保使用來自@material-ui/core/styles makeStyles ：

const useStyles = makeStyles(theme => ({
  input: {
    padding: '15px 0px',
    border: 'none'
  },
  list: {
    maxHeight: 300,
    overflowY: 'scroll',
    "& .MuiAutocomplete-option": {
      padding: 0
    },
  }
}));