CODEWITHSUNDEEP
reactjsmaterial-uistyled-components
EmmaJoe
EmmaJoe

Reputation: 452

How to customize MUI V5 TextField

I am trying to customise my theme for material v5 and I would like to know how I can disable the black border that appears when I hover over the textfield component. This is what I have so far under my custom theme

 MuiTextField: {
      styleOverrides: {
        root: {},
      },
      defaultProps: {
        inputProps: {
          style: {
            fontSize: '11.8px',
            // height: '.85rem',
          },
        },
      },
    },

Upvotes: 3

Views: 8622

Answers (2)

Hamed Siaban
Hamed Siaban

Reputation: 1682

Change your styleOverrides like this:

MuiTextField: {
  styleOverrides: {
    root: {
      "& .MuiOutlinedInput-root": {
        "&:hover fieldset": {
          borderColor: "rgba(0, 0, 0, 0.23)",
        },
        "&.Mui-focused fieldset": {
          borderColor: "rgba(0, 0, 0, 0.23)",
        },
      },
    },
  },
  defaultProps: {
    inputProps: {
      style: {
        fontSize: "11.8px",
        // height: '.85rem',
      },
    },
  },
},

Upvotes: 3

EmmaJoe
EmmaJoe

Reputation: 452

Checkout the documentation at: https://mui.com/material-ui/react-text-field/#customization

import * as React from 'react';
import { alpha, styled } from '@mui/material/styles';

import TextField from '@mui/material/TextField';

const CssTextField = styled(TextField)({
  '& label.Mui-focused': {
    color: 'green',
  },
  '& .MuiInput-underline:after': {
    borderBottomColor: 'green',
  },
  '& .MuiOutlinedInput-root': {
    '& fieldset': {
      borderColor: 'red',
    },
    '&:hover fieldset': {
      borderColor: 'yellow',
    },
    '&.Mui-focused fieldset': {
      borderColor: 'green',
    },
  },
});

export default function CustomizedInputs() {
  return (
      <CssTextField label="Custom CSS" id="custom-css-outlined-input" />
  );
}

Upvotes: 5

Related Questions