1

using Material UI V5 and i can't change the border color of my TextField with the sx prop.

Changing the color of the label and input works fine, but not with border color.

<TextField
        sx={{ 
          input: { color: 'white' } ,
          label: {color: 'white'},
          borderColor: 'white',
          border: {color: 'white'},
        }}

Any ideas?

Freddy
  • 48
  • 1
  • 7
  • I think the border should be visible only for outlined TextFields. Is that correct? Does this help you? https://stackoverflow.com/questions/52911169/how-to-change-the-border-color-of-mui-textfield – mc-user Apr 18 '22 at 14:50

2 Answers2

5

The TextField is a weird one, the border is actually defined on the fieldset element. The following should style that.

<TextField 
  sx={{
    fieldset: { borderColor: "red" }
  }}

Here is a screen capture of the TextField HTML to help show the fieldset element I'm talking about. enter image description here

jdk905
  • 495
  • 5
  • 11
  • But I need to add the color only when the input is active – J. Villasmil May 08 '23 at 21:10
  • I'm guessing the following would work? sx={{ "&:active fieldset": { borderColor: "red"} }} I do not have anything in front of me to verify that snippet to be sure. – jdk905 May 15 '23 at 02:39
1

For changing the border color, you can change borderBottom color inside input:

 <TextField sx={{
                input: {
                       color: "#ffffff",
                       borderBottom: "1px solid #ffffff",
                       },
                 }}/>
Sheghzo
  • 26
  • 5