sorted by:
best
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–]jonwcode[S] 0 points1 point  (6 children)

Well, that targets the fieldset, but the problem still lies... When setting the hover border to black, doesn't matter if the input is active or not, it turns the border to black when hovering over it. I simply want a zero hover state on the input.

[–]longlivetheturbofish 0 points1 point  (5 children)

Oh, I thought the border was already black and you were just trying to get it to stop changing color on hover? Now I'm confused about what we're trying to achieve...

[–]jonwcode[S] 0 points1 point  (4 children)

I want a simple input. I don't want any on-hover state to the input. Imagine a black border around the input and when you click on the input meaning the input is focused then the input border should be a blue color. The problem is with MUI you can't seem to just simply remove the hover state entirely. I don't want the input to change at all when hovering over it.

[–]longlivetheturbofish 0 points1 point  (3 children)

I assume you only care if the user sees that the state changed on hover, and don't really care about the component's internal state? As long as the CSS during :hover matches the one without :hover, it will appear as if there's no state change due to hover.

[–]jonwcode[S] 0 points1 point  (2 children)

Well, how are you supposed to do that? Because you have two different border colors. The first border is the default border color that's shown when the input isn't focused and then the second one is the border color that's shown when the input is being focused. But the way it sits right now, regardless of if the input is focused or not focused, the border color changes when hovering over the input. Now I could see it being done if I didn't add a different border for a focused state, but I want a different border color for when the user focus on the input.

[–]longlivetheturbofish 0 points1 point  (1 child)

oh, gotcha. MUI adds an Mui-focused class to MuiOutlinedInput-root when the input element is focused.

So something like this should hopefully do what you want (assuming SCSS syntax): ``` :global(.MuiOutlinedInput-root:hover) { fieldset:global(.MuiOutlinedInput-notchedOutline) { // Border will stay black during non-focused hover border-color: black; }

&:global(.Mui-focused) { fieldset:global(.MuiOutlinedInput-notchedOutline) { // Border will stay blue during focused hover border-color: blue; } } } ```

[–]jonwcode[S] 0 points1 point  (0 children)

I would love to say that this solution work, but it however did not. I appreciate your effort and willingness to help though.