Check out this input field:
https://i.sstatic.net/Z6URV.png
Notice the inner shadow and curved borders.
Take a look at the given code snippet:
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="Search.."
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;
Inspecting it in the browser will reveal:
If you uncomment the styled part of the code, it may look like this:
https://i.sstatic.net/pGNNa.png
You'll notice the blue border, but the curved borders and shadow remain in the background.
Any suggestions on how to remove them? Even using box-shadow: none !important; in web tools doesn't seem to do the trick.