css - 如何从 Material UI TextField React 组件中删除 flex 的边框和插入框阴影？

Question

这是输入框:

它有内部阴影和 flex 的边框。

代码如下:

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;

这是它在浏览器的检查中的显示方式:

如果我在代码中取消注释样式的注释部分，它会显示如下:

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

如何删除它们？甚至 box-shadow: none !important;在网络工具中不会删除它。

Answer 1

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

如果样式位于主元素上，那么您的样式属性应该有效。

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

同时检查 docs更多元素特定样式属性选项。