如何从 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;

这是它在浏览器检查中的显示方式：

如果我在代码中取消注释样式的注释部分，它会显示如下：

如您所见，这是我想要的蓝色边框，但弯曲的边框和内部阴影仍显示在背景中。

如何删除它们？偶数框阴影：none !important;在网络工具中不会删除它。

Answer 1

请检查应用 boxShadow 和 borderRadius 的元素。当您找到它时，相应地您可以使用 Material UI Textfiled 的不同属性并影响其样式。

如果样式在主元素上，那么您的样式属性应该有效。

我怀疑它在 input 元素上，您可以使用 TextField 的 inputStyle 属性更改该元素。

同时检查 docs 以获得更多元素特定样式属性选项。

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
    },
  }
}));

如何从 Material UI TextField React 组件中删除弯曲的边框和内嵌框阴影？

How to remove curved border and inset box shadow from Material UI TextField React component?

css

input

textfield

reactjs

box-shadow