如何从材质UI Textfield Reaction组件中移除弯曲边框和插框阴影？ [英] How to remove curved border and inset box shadow from Material UI TextField React component?

问题描述

以下是输入字段：

其中有此内部阴影和弧形边框。

代码如下：

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;

以下是它在浏览器检查中的显示方式：

如果我取消注释代码中已注释的样式部分，则显示如下：

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

如何删除它们？ 甚至框阴影：无！重要；在Web工具中不会将其删除。

推荐答案

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

如果样式位于主元素上，则您的样式属性应该已起作用。

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

另请查看docs以了解更多特定于元素的样式属性选项。

这篇关于如何从材质UI Textfield Reaction组件中移除弯曲边框和插框阴影？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！