How to get rid of border and add background color to MUI TextField variant outlined

user_15255487 0
Viewed 1455

I want to customize outlined variant of TextField in Material UI and to below field I want to remove border or give color to white and give different background color. I'm using styled components in my app, but also tried tried makeStyles and it didn't work, although when I make changes in chrome dev tools I'm able to do so. I have tried this class from documentation .MuiTextField-root and it didn't work. I chrome dev tools it works for this class but when I add this class to styled component ( without this .css-wacwkt-) it doesn't work. With element.style it's the same situation. enter image description here

enter image description here

To interact with border I need to use in chromedev tools fieldset selector and it works for element.style and this marked class. You can see on the left with border-color:blue which TextFields it's about enter image description here

This is how it's implemented in the code

 <StyledInputSection>
                        <StyledDataHeader>
                            {contactDataTxt}
                        </StyledDataHeader>
                        <InputForm
                            name={'phoneNumber'}
                            id={'phoneNumber'}
                            label={phoneNumberLabelTxt}
                            disabled={isDisabledInputs}
                        />
                        <InputForm
                            name={'email'}
                            id={'email'}
                            label={emailLabelTxt}
                            disabled={isDisabledInputs}
                        />
                        {/* Show checkbox only for create new user by Admin */}
                        {!isDetailsView && !idUser && (
                            <CheckboxForm
                                label={emailAsLoginTxt}
                                name={'isEmailAsLogin'}
                                disabled={isDisabledInputs}
                            />
                        )}

                        <InputForm
                            name={'userName'}
                            id={'userName'}
                            label={loginLabelTxt}
                            disabled={
                                isDisabledLoginInput || isDisabledInputs
                            }
                        />
                    </StyledInputSection>

InputForm is TextFiled component prepared as re-usable.

appreciate Your support.

regards

material-ui styled-components reactjs
1 Answers

Updated Component Example:

You can override the default styling as a styled component by hooking into the existing classes:

const ExampleTextField = styled(TextField)({
  backgroundColor: "#eee",
  "& .MuiOutlinedInput-notchedOutline": {
    border: "none"
  },
  "&.Mui-focused": {
    "& .MuiOutlinedInput-notchedOutline": {
      border: "none"
    }
  }
});

Working component code example: https://codesandbox.io/s/customizedinputs-material-demo-forked-lpxwb?file=/demo.js:166-403

Original Themed Example:

If you're ok adding it to the theme, something as simple as this may work for you:

(You can also do something similar in InputForm with styled components if you don't want this to affect every outlined variant.)

const theme = createTheme({
  components: {
    // Inputs
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          backgroundColor: "#eee", // As an example color
          "& .MuiOutlinedInput-notchedOutline": {
            border: "none"
          },
          "&.Mui-focused": {
            "& .MuiOutlinedInput-notchedOutline": {
              border: "none"
            }
          }
        }
      }
    }
  }
});

Working theme code example: https://codesandbox.io/s/customstyles-material-demo-forked-u644m?file=/theme.js

user_31804890
Related