Here's the input field:
It has this inner shadow in it and curved borders.
Here's the code:
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;
Here's how it shows in the browser's inspect:
If I uncomment the commented part of the style in the code it shows like this:
As you can see, here's the blue border that I'd like but the curved borders and the inner shadow is still showing in the background.
How to remove them? Even box-shadow: none !important; in web tools doesn't remove it.
Please inspect the element where the boxShadow
and borderRadius
are being applied. When you find it, accordingly you can use different attributes of the Material UI Textfiled and effect its style.
If the style is on the main element then your style attribute should have worked.
I suspect it to be on input
element which you can change by using inputStyle
attribute of TextField
.
Also check the docs for more element specific style attributes option.