Attempting to create an OutlinedInput with a see-through border, however encountering strange artifacts

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

Struggling to achieve a TextField select with outlined variant and a see-through border. Here's the current theme override I'm using:

overrides: {
    MuiOutlinedInput: {
      root: {
        backgroundColor: '#F4F4F4',
        borderRadius: 8,
        height: 56
      },
      notchedOutline: {
        borderColor: 'transparent !important',
        borderRadius: 8,
        borderWidth: '0px !important'
      }
    }
  }

However, as shown in this image, there appears to be a strange block artifact around the borders when the select is focused.

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

I want it to maintain the appearance seen in the second photo, but once it is focused, those odd edges from the first photo come into play. Any solutions?

Answer №1

Lately, I've been experimenting with overrides as well. Material components are typically constructed using other material components, which means you might need to provide overrides for more than just MUIOutlinedInput.

You may find it necessary to customize both MuiInput and MuiInputBase.

Alternatively, if you prefer not to override all of those, you can generate a custom style object and inject it into the component using either withStyles or useStyles

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

The width specified for the table is not being applied

I've been struggling to adjust the width of my table in order to display data from a database. I've tried using inline width, !important tag, id, and class but none have worked. Interestingly, when I apply a fixed width without dynamic data, it w ...

Using AngularJS to Retrieve a Specific DOM Element Using its Unique Identifier

Example Please take a look at this Plunkr example. Requirement I am looking for a way to retrieve an element by its id. The provided code should be capable of applying a CSS class to any existing DOM element within the current view. This functionality ...

Placing an absolutely positioned element on top of other elements

Currently, I am working on a frontendmentor website and encountering difficulty in positioning the shopping cart div above all the other elements. Initially, I attempted to use z-index for this purpose, but it seems that it does not work with elements havi ...

perfecting the styling of a tab management system

For reference, please check out the following link: http://jsfiddle.net/XEbKy/3/ In my design, I have organized two layers of tabs. The top layer consists of two tabs while the bottom layer has three tabs. My goal is to have all these tabs neatly enclosed ...

I'm wondering why using display flex with justify-content center and align-items center is not properly centering the elements both horizontally and vertically. Can anyone explain this?

As I delve into the world of JavaScript, I find myself coding simple JS, HTML, and CSS snippets to enhance my learning experience. These exercises help me grasp the concepts well enough to create various JS web elements and projects. My goal is to eventual ...

Prevent the top of the fifth row from displaying on mobile devices when the first four rows are hidden

My personal website features a collection of user-generated stories, with only the first 4 rows of each story visible in a fading text gradient from black to white. There is a "show more/less" button to reveal or hide the full content. While this layout ...

Expand the size of bootstrap-datepicker to fill the entire screen

I've implemented the plugin from https://github.com/uxsolutions/bootstrap-datepicker Check out the JSFiddle demo: https://jsfiddle.net/j3b089gr/ In my example, I have the calendar displayed along with the HTML code: <div class="row"> <di ...

Making a dropdown menu spin using Jquery and Javascript

I am in need of a unique solution for a dropdown menu that appears rotated 90 degrees anticlockwise. The goal is to have the dropdown select "button" text displayed vertically, with the options sliding out in a similarly rotated, sideways manner featuring ...

Eliminate resistance on HTML components

Have you ever noticed that when you click on an HTML element, such as images, you can drag a "shadow version" of them around on the screen? For example, take the Stack Overflow logo. If you click and drag it, you'll see a dark version of the logo mov ...

Is it possible to modify the variables in a SCSS file within an Angular 2 project?

Currently, I am working with Angular 2 using a SCSS style. My challenge is to retrieve data from a server in order to change a specific variable within the component's style - specifically a percentage value. You can view the SCSS and HTML code here. ...

Dynamic water filling effect with SVG

I'm trying to create a wipe animation that looks like water filling up inside of a drop shape. Currently, it is a square with a wave animation on top of the drop logo. The wave animation works correctly, but I am struggling to contain it within the dr ...

The React useEffect hook will only trigger if I modify the code while the page is already loaded

I've encountered a perplexing issue in React where the functionality of my useEffect within a component only works if I manually tweak the code, even with minor changes like adding or removing a console.log statement after the component has loaded. He ...

Styling limitations encountered when using lang="scss" with scoped css

My current project involves using Quasar and I am attempting to style the first column of q-table: <style lang="scss" scoped> td:first-child { background-color: #747480 !important; } </style> Unfortunately, this code does not seem to have a ...

The click interactions of SVG elements are altered when switching between <img> and <object> elements

I currently have 4 SVG buttons featured in the main menu of my personal website. https://i.stack.imgur.com/gA7En.png /----------------------------------------------------------------------------------------------------------------------------------/ Upo ...

I'm curious about the location where label_color keys are stored within apache-superset

Version: I have installed a Docker instance of Superset from this source The documentation mentions that colors can be customized based on labels, as explained here. To achieve this, it is necessary to provide a mapping of labels to colors in the JSON ...

Can an action be activated when the mouse comes to a halt?

Currently, I am having trouble triggering an event when a user stops moving their mouse over a div element. The current event is set up to show and follow another element along with the mouse movement, but I want it to only display when the mouse stops mov ...

Utilizing a Material UI custom theme in React with Typescript: A step-by-step guide

Upon using the tool , I received a js file and a json file following the paths mentioned on the theme generator page: // src/ui/theme/index.js /* src/ui/theme/theme.json */ The files operate smoothly when left with the .js extension. However, when I attem ...

Expanding CSS styles on hover

When my mouse pointer moves out of the red color box, it still triggers the hover function. However, I only want the hover effect to work within the red color box and hide the menu when it's outside the box. This is the source code from JSfiddle: htt ...

Dynamic Website Layout Bootstrap 4 [ card designs and Tabs ]

Currently, I am in the process of developing a web application that needs to be responsive across various devices including mobiles, tablets, and PCs. My focus right now is on creating a user profile page that adapts well to different screen sizes. To achi ...

Step-by-step guide on applying a universal CSS class to every component within an application

I am in the process of building a multilingual react application and I am looking for a solution to dynamically apply certain CSS styles to most components based on the chosen language. I am seeking something akin to direction-rtl and direction-ltr, whic ...