CODEWITHSUNDEEP
reactjsmaterial-ui
Archit
Archit

Reputation: 1

How can I override CSSfor material UI TextField component?

I am using Material UI's Autocomplete/TextField and I want to override its default CSS on hover and when the text field is in focus state.

Default CSS: Image for default CSS in focused state

I want to change this blue colour when input box is in focus state.

I have tried using ThemeProvider/createTheme hook but it is not helping. Below is the code for createTheme:

import { ThemeProvider, createTheme } from "@mui/material/styles";

const overrideTheme = createTheme({
  overrides: {
    MuiInput: {
      root: {
        "&$focused": {
          borderColor: "red",
        },
      },
    },
  },
});
export default function AutocompleteComponent() {
return (
    <ThemeProvider theme={overrideTheme}>
 <Autocomplete
          classes={classes}
          freeSolo
          id="free-solo-2-demo"
          options={
            autocompleteResult ? top100Films.map((option) => option.title) : []
          }
          renderInput={(params) => (
            <TextField
              variant="outlined"
              {...params}
              placeholder="Search..."
              InputProps={{
                ...params.InputProps,
                type: "search",
                classes: {
                  root: classes.root,
                  notchedOutline: classes.notchedOutline,
                },
                className: classes.input,
                endAdornment: false,
              }}
            />
          )}
        />
 </ThemeProvider>
 );
}

Upvotes: 0

Views: 2031

Answers (1)

Anroche
Anroche

Reputation: 1021

You have to use the browser dev tools to identify the slot for the component you want to override. Once that's done, you write a CSS file with the class you want to change.

To force the class you can use :

!important

file : styles.css

exemple:

.css-1q6at85-MuiInputBase-root-MuiOutlinedInput-root{
    border-radius: 50px!important;
}

Upvotes: 0

Related Questions