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:无!重要；在网络工具中不会删除它。

Answer 1

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

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

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

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