Kevin Powell - Community•7mo ago

how to style single mui components like textfields

Hello everyone, I'm having a really bad time trying to customize a textfield in react with material ui. What I want to do is to be able change color of label, default border, input text and placeholder. I know I can change the theme but i don't want that, I want to keep the original theme as it is but just override the components as I need. Can anyone one guide me to a tutorial, blog, video, whatever, i just can't get this done, please.

7 Replies

MarkBoots•7mo ago

im not familia with material ui, but according to their docs you can customize the defaults and override styles of a component https://mui.com/material-ui/customization/theme-components/

Themed components - Material UI

You can customize a component's styles, default props, and more by using its component key inside the theme.

Hency•7mo ago

This is not helping me. thanks anyway

Bola.Ghaly•7mo ago

1) To change color of input text:

<TextField
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
        inputProps={{ style: { color: "red" } }}
      />
      <TextField
        id="filled-basic"
        label="Filled"
        variant="filled"
        inputProps={{ style: { color: "red" } }}
      />
      <TextField
        id="standard-basic"
        label="Standard"
        variant="standard"
        inputProps={{ style: { color: "red" } }}
      />

<TextField
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
        inputProps={{ style: { color: "red" } }}
      />
      <TextField
        id="filled-basic"
        label="Filled"
        variant="filled"
        inputProps={{ style: { color: "red" } }}
      />
      <TextField
        id="standard-basic"
        label="Standard"
        variant="standard"
        inputProps={{ style: { color: "red" } }}
      />

Bola.Ghaly•7mo ago

2) To change color of label:

<TextField
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
        InputLabelProps={{ style: { color: "red" } }}
      />
      <TextField
        id="filled-basic"
        label="Filled"
        variant="filled"
        InputLabelProps={{ style: { color: "red" } }}
      />
      <TextField
        id="standard-basic"
        label="Standard"
        variant="standard"
        InputLabelProps={{ style: { color: "red" } }}
      />

<TextField
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
        InputLabelProps={{ style: { color: "red" } }}
      />
      <TextField
        id="filled-basic"
        label="Filled"
        variant="filled"
        InputLabelProps={{ style: { color: "red" } }}
      />
      <TextField
        id="standard-basic"
        label="Standard"
        variant="standard"
        InputLabelProps={{ style: { color: "red" } }}
      />

Bola.Ghaly•7mo ago

3) To change color of placeholder:

      <TextField
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
        placeholder="hello"
        sx={{
          "input::placeholder": {
            color: "red",
            opacity: 1
          }
        }}
      />
      <TextField
        id="filled-basic"
        label="Filled"
        variant="filled"
        placeholder="hello"
        sx={{
          "input::placeholder": {
            color: "red",
            opacity: 1
          }
        }}
      />
      <TextField
        id="standard-basic"
        label="Standard"
        variant="standard"
        placeholder="hello"
        sx={{
          "input::placeholder": {
            color: "red",
            opacity: 1
          }
        }}
      />

      <TextField
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
        placeholder="hello"
        sx={{
          "input::placeholder": {
            color: "red",
            opacity: 1
          }
        }}
      />
      <TextField
        id="filled-basic"
        label="Filled"
        variant="filled"
        placeholder="hello"
        sx={{
          "input::placeholder": {
            color: "red",
            opacity: 1
          }
        }}
      />
      <TextField
        id="standard-basic"
        label="Standard"
        variant="standard"
        placeholder="hello"
        sx={{
          "input::placeholder": {
            color: "red",
            opacity: 1
          }
        }}
      />

Bola.Ghaly•7mo ago

4) To change color of the default border: I found this solution online on stack overflow: https://stackoverflow.com/questions/52911169/how-to-change-the-border-color-of-material-ui-textfield

      <TextField
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
        sx={{
          "& .MuiOutlinedInput-notchedOutline": {
            border: "2px dotted brown"
          },

          "& .MuiOutlinedInput-root": {
            "&.Mui-focused fieldset": {
              border: "2px solid red"
            }
          }
        }}
      />

      <TextField
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
        sx={{
          "& .MuiOutlinedInput-notchedOutline": {
            border: "2px dotted brown"
          },

          "& .MuiOutlinedInput-root": {
            "&.Mui-focused fieldset": {
              border: "2px solid red"
            }
          }
        }}
      />

Disclaimer: This is not my solution and I am pretty sure it overrides MUI's default styling so use it at your own risk lol

Stack Overflow

How to change the border color of Material UI TextField

I can't seem to figure out how to change the outline color of an outlined variant TextField I looked around GitHub issues and people seem to be pointing towards using the TextField "InputProps...

Bola.Ghaly•7mo ago

Hope this helps! 🙂

Gaming

Programming

how to style single mui components like textfields