如何从材质UI Textfield Reaction组件中移除弯曲边框和插框阴影?

2022-04-08 00:00:00 input reactjs css textfield box-shadow

以下是输入字段:

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

代码如下:

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工具中不会将其删除。


解决方案

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

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

我怀疑它在input元素上,您可以使用TextFieldinputStyle属性更改该元素。

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

相关文章