What is the best way to eliminate the curved border and inset box shadow from the Material UI TextField component in React?

Check out this input field:

https://i.sstatic.net/Z6URV.png

Notice the inner shadow and curved borders.

Take a look at the given code snippet:

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="Search.."
                    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;

Inspecting it in the browser will reveal:

If you uncomment the styled part of the code, it may look like this:

https://i.sstatic.net/pGNNa.png

You'll notice the blue border, but the curved borders and shadow remain in the background.

Any suggestions on how to remove them? Even using box-shadow: none !important; in web tools doesn't seem to do the trick.

Answer №1

Take a closer look at the element where the styles for boxShadow and borderRadius are being applied. Once you locate it, you can modify its appearance using different attributes available in Material UI Textfield.

If the styling is applied to the main element, then your style attribute should have successfully made changes.

I believe the styling might be affecting the input element, which can be adjusted using the inputStyle attribute of TextField.

Don't forget to refer to the documentation for more options on specific style attributes for elements.

Answer №2

#example {
  height: 50px;
  width: 300px;
  border: 2px solid red;
}
#example:focus {
  border: 2px solid black;
  border-radius: 0px;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;

}
<input id ="example" type="text">

This solution may prove beneficial.

Answer №3

If you set the outline property to none and focus on the input text-field, it will remove the outline.

'&:focus': {
            outline: "none"
           },

This solution has worked perfectly for me!

Answer №4

To enhance the TextField component, include variant="outlined" and the following InputProps:

InputProps={{
  ...params.InputProps,
  classes: {
    notchedOutline: classes input
},
startAdornment: (
  <SearchIcon />
),

Ensure you utilize makeStyles from @material-ui/core/styles as well:

const useStyles = makeStyles(theme => ({
  input: {
    padding: '15px 0px',
    border: 'none'
  },
  list: {
    maxHeight: 300,
    overflowY: 'scroll',
    "& .MuiAutocomplete-option": {
      padding: 0
    },
  }
}));

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are some methods for applying border styles to the first and last row of a table using Material UI?

In my current project, I am utilizing the combination of Material UI and React Table. Recently, I was asked to implement an expandable row feature, which I successfully added. Once the user expands the row, we need to display additional table rows based on ...

Restrict the quantity of recommendations provided by the AutoComplete feature

After exploring the autocomplete API from https://material-ui.com/api/autocomplete/, I am unable to figure out a way, given my basic understanding of javascript, to restrict the display of a specific number of options beneath the TextField. I am working o ...

Is it possible to override the body width setting?

Is it possible to override the width of the body element? For example, consider the following: <body> <table id="table1"> <tr><td></td></tr> </table> <table id="table2"> <tr><td></td>& ...

Is it possible to integrate Material UI with Bootstrap 4?

I'm currently working on a web application using React JS and Material-UI for components. I've been feeling a bit unsure about the responsiveness of my web pages, so I was wondering if it's possible to use Bootstrap 4 alongside Material-UI. ...

What is the best way to implement GlobalStyles from styled components in a Next.js project?

As I begin my journey into learning Next.js, I find myself a bit confused about how to utilize the createGlobalStyle feature of styled components within this framework. ...

Rules of HTML tables extend to the border size

Check out this HTML code snippet: div { border: 2px solid red; height: 50vh; width: 50vw; } table { border: 1px solid; table-layout: fixed; } <div> <table rules="cols"> <tr> <th>Name</th> < ...

(discovered: [object Promise]) utilizing Material UI and DexieJS

Exploring DexieJS and Material UI for the first time has been quite a learning experience, so I may have overlooked a crucial aspect. Here is a glimpse of my code: Subscreen.tsx const [fightersArray, setFightersArray] = useState<FighterEntity[]>([]) ...

Can we resize the button to match the width of the blue bar?

.nav-info { height: auto; background-color: darkblue; color: white; padding: 1em; padding-left: 5%; flex-direction: row; justify-content: space-between; } .flexbox { display: flex; } .info a { color: white; text-decoration: none; fo ...

Preventing audio from automatically playing when the page is refreshed in a React application

I am facing an issue with my audio. It plays when componentDidMount() is called, but it does not play again when the page is refreshed, even though componentDidMount() is executed again. Can someone suggest a solution to make the audio play again when th ...

What is the best way to showcase a collection of images in a React Native app after obtaining their URLs?

In an effort to showcase a preview of selected images after picking them, I am utilizing the following library: import { AssetsSelector } from 'expo-images-picker'; The code below demonstrates how to select an image: import React, { useMemo } ...

Designating a class for the main block

Having an issue with a slider in uikit. When the slide changes, the visible elements also change their class to uk-active. I'm trying to select the central element from the active ones but css nth-child doesn't work. Any suggestions on how to do ...

Why isn't my React cascading select filter working properly on onChange event?

I'm new to React and facing an issue in my app. I have a set of options fields in my drawer on the left side, where each subsequent option depends on the selection of the previous one. The problem arises when my filter function returns an empty array ...

difficulties arise when adjusting font size in html and css

When I first created an all HTML/CSS website, I used clickable images as a menu that scaled perfectly on all monitors and browsers. Now, for my new project, I wanted to use a background image for the menu with hyperlinked text on top. I thought setting the ...

Showcasing text behind an element with reduced opacity when the element directly above it is selected using rails, CSS, and jQuery

I have a password field on my page where the password is hidden, but I want users to be able to copy and paste the clear text version of the password on another website. In order to achieve this, I followed the instructions in an article titled Mask text, ...

Maximizing Compatibility of CSS3 Responsive Image Sprites for Firefox

Take a look at the Demo. Make sure to test it on both Chrome and Firefox to experience the difference. I've created a div element with the following CSS classes to make a responsive sprite of images: .what-wwb-logo, .what-national-geographic-logo, . ...

Is your sticky sidebar getting in the way of your footer?

I've developed a custom sticky sidebar for displaying ads, but I'm facing an issue. When I scroll to the bottom of the page, it overlaps with the footer. Can someone please take a look at this? - var stickySidebar = $('.sticky'); if ...

Designing a fixed bottom footer enclosed within a wrapper that expands from the top header to the bottom footer

I have created the basic structure of my webpage using HTML / CSS. However, I now realize that I need a sticky footer that remains at the bottom of the screen with a fixed position. Additionally, I want the main content area, known as the "wrapper," to str ...

Reactjs Invariant Violation caused by the npm package (react-loader)

I'm currently attempting to integrate react-loader into my react component. This is the code snippet I'm using: /** @jsx React.DOM */ var Loader = require('react-loader'); var DisplayController = React.createClass({ // etc ...

Tips for incorporating API-provided CSS values into AngularJS expressions for stylish card customization

I am in the process of creating unique Pokemon cards that pull data from an API. My question is, how can I apply specific CSS styling to each card directly from the API, similar to how I have utilized AngularJS to render the information? So far, I have su ...

What could be the reason that the painting application is not functioning properly on mobile devices?

I am facing an issue with my painting app where it works perfectly on desktop browsers but fails to function on mobile devices. I tried adding event listeners for mobile events, which are understood by mobile devices, but unfortunately, that did not solve ...