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

Question

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.

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

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

Steve · Accepted Answer · 2022-02-08T16:58:46.153

3

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

edited Feb 08 '22 at 16:58

answered Feb 07 '22 at 20:52

Steve

11,596
7
39
53

Hello. Unfortunately I cannot style all outlined variant as changed one will be used only in one place. I have tried Your advise to StyledComponents and it didn't work, I have also created class using makeStyles() as below, but it also don't work. Where is the mistake ? const useStyles = makeStyles({ root: { backgroundColor: '#793c3c', '& .MuiOutlinedInput-notchedOutline': { border: 'none', }, '&.Mui-focused': { '& .MuiOutlinedInput-notchedOutline': { border: 'none', }, }, }, }); – marcinb1986 Feb 08 '22 at 09:46
@marcinb1986 I've updated my answer with a reusable styled component example as well. – Steve Feb 08 '22 at 16:59
It works, I have done almost all my styling, but there is one more issue. I want to change font color and although it works in Your code sandbox it doesn't work in my code althouth I have implemented it exactly the same. Do You have any advise where to look for error ? – marcinb1986 Feb 08 '22 at 20:14
1

@marcinb1986 It may be that you're putting the color in the wrong class -- try putting it in `"& .MuiOutlinedInput-input": { color: 'red' }`. If that doesn't work, I'll need to see the code for your styled component, so you can put it in another question and notify me here. – Steve Feb 08 '22 at 20:27
new topic added, thanks!!! https://stackoverflow.com/questions/71040739/i-cannot-change-font-color-in-textfield-component-from-material-ui – marcinb1986 Feb 08 '22 at 20:53
@marcinb1986 I'm a little confused by the new question. Are you trying to accomplish the text color change in the theme for all `outlined` components or just your `InputForm` styled component? – Steve Feb 08 '22 at 21:18
I want to change it only for input text, not the label. – marcinb1986 Feb 09 '22 at 10:45
I have investigated a bit the solution of my issue and I got the suggestion that I shall change styling of disabled status for TextField in global createTheme. I have made another ticket for it, will appreciate if You look on it : https://stackoverflow.com/questions/71049327/how-to-style-disabled-class-in-textfield-in-material-ui-5-using-global-createt – marcinb1986 Feb 09 '22 at 12:10

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

1 Answers1