如何从材质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以了解更多特定于元素的样式属性选项。
相关文章