Material-ui: MuiOutlinedInput focused not working

[udanpe]

demo https://codesandbox.io/s/1vj322vq4q
after focus borderColor not changed to red

[oliviertassinari]

@udanpe Check out or customization demos: https://material-ui.com/demos/text-fields/#customized-inputs.

[udanpe]

@oliviertassinari InputBase its not cool create new theme only for input its not cool too. Any idea how i can change focus border for TextField?

[udanpe]

it's solution

  MuiOutlinedInput: {
    root: {
      '&$focused $notchedOutline': {
        borderColor: 'green',
        borderWidth: 1,
      },
    }
  },

[oliviertassinari]

@udanpe Thank you for sharing the solution! We get this question so often that I think that we should provide a better answer.

[danieldram]

I honestly spent 2 hours on this. You guys are [explict] stupid for not putting this in the docs and leaving us developers to scour the internet. Thank you a million plus times @udanpe I would buy you a cup of coffee everyday for figuring this out.

[eps1lon]

@danieldram What strategy did you use to search in the docs for a solution? We have a section about this (https://material-ui.com/customization/overrides/#internal-states) but discoverability might be poor. Maybe we can improve it if we know the keywords you used for searching.

[mbrookes]

You guys are [explict] stupid for not putting this in the docs

@danieldram please tone it down. Abusive language, even if "censored" (it's clear what you are saying) will not be tolerated.

As @eps1lon points out, this _is_ in the docs. If you feel they can be improved, a pull request would be more constructive.

[oliviertassinari]

@danieldram You have an example here: https://material-ui.com/demos/text-fields/#customized-inputs. How would you improve the documentation?

[mattsrobot]

@oliviertassinari @mbrookes thank-you kindly for working on this great library.

My problem is I'm trying to override this CSS in js:

@media (hover: none) {
  .MuiOutlinedInput-root-140:hover:not(.MuiOutlinedInput-disabled-142):not(.MuiOutlinedInput-focused-141):not(.MuiOutlinedInput-error-145) .MuiOutlinedInput-notchedOutline-147 {
    border-color: rgba(0, 0, 0, 0.23);
  }
}

I can't figure out what would be the js equivalent.

[oliviertassinari]

@mattsrobot Does it help?

import styled from 'styled-components';
import TextField from '@material-ui/core/TextField';

const StyledTextField = styled(TextField)`
  label.focused {
    color: green; 💚
  }
  .MuiOutlinedInput-root {
    fieldset {
      border-color: red; 💔
    }
    &:hover fieldset {
      border-color: yellow; 💛
    }
    &.Mui-focused fieldset {
      border-color: green; 💚
    }
  }
`;

https://material-ui.com/styles/advanced/#GlobalClassName.js

[mattsrobot]

@oliviertassinari you're a legend, thank-you again!

[mattsrobot]

@oliviertassinari I found I need to override this:

  MuiOutlinedInput: {
    root: {
      '&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
        borderColor: 'green',
        borderWidth: 1,
      },
    }
  },

[thorakmedichi]

My input outline needs to change based on some user settings. So in one setting its yellow outline and in another it is blue (non hover, non selected).

Can anyone help me figure out how to do this. None of these answers here quite target this concept of dynamic styling.

If they are on the same page and update their color pallette all the inputs should update in real time based on their change.

Looks like all these answers are only good for a one time setting at app start up / component initial render

[benmccann]

I had to do this:

const StyledTextField = styled(TextField)`
  label.Mui-focused {
    color: #e7396d;
  }
  .MuiOutlinedInput-root {
    &:hover fieldset {
      border-color: #e7396d;
    }
    &.focused fieldset {
      border-color: #e7396d;
    }
  }
  .MuiOutlinedInput-root.Mui-focused fieldset {
    border-color: #e7396d;
  }
`;

I found this page helpful: https://material-ui.com/api/outlined-input/

[k1941996]

The documentation is not upto the mark. If someone wants to start off using the documentation he cannot understand using the demos and the API that you have provided. that is for sure. Please add all the methods used to customize the components. For example : there are examples for withStyle and makeStyle but none of createmuiTheme. if by any chance you can add individual examples how to use these methods .. that would be great. If ill find out ill post them. and write them for you .

[mbrookes]

@k1941996 Is this what you're looking for?

[k1941996]

@mbrookes : thanks for the reply . yes i was looking for this only .. though the docs werent proper enough so i couldn't find it. It should have been : " you can create a theme variable using the method/function createMuitheme({//css you want to override }) and import it in your component and use with I suppose there are mainly 3 methods by which css can be overriden i.e makeStyle, createStyle and createMuiTheme. Though after so much of research i found out the way. Thanks again :)

[Jaaneek]

I cant implement it with using classes={}. Can you give an example how to overwrite it?
classes={focused:styles.focusedInput} imported from css module doesnt work.