怎么从材质UI Textfield Reaction组件中移除弯曲边框和插框阴影？

本教程将介绍如何从材质UI Textfield Reaction组件中移除弯曲边框和插框阴影？的处理方法，这篇教程是从别的地方看到的，然后加了一些国外程序员的疑问与解答，希望能对你有所帮助，好了，下面开始学习吧。

问题描述

以下是输入字段：

其中有此内部阴影和弧形边框。

代码如下：

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;

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

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

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

怎么删除它们？
甚至框阴影：无！重要；在Web工具中不会将其删除。

推荐答案

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

如果样式位于主元素上，则您的样式属性应该已起作用。

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

另请查看docs以了解更多特定于元素的样式属性选项。

好了关于怎么从材质UI Textfield Reaction组件中移除弯曲边框和插框阴影？的教程就到这里就结束了，希望趣模板源码网找到的这篇技术文章能帮助到大家，更多技术教程可以在站内搜索。