cssreactjsinputtextfieldbox-shadow

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


Here's the input field:

enter image description here

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:

enter image description here

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.


Solution

  • 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.