how to override material ui css using css (reactjs)?

Question

I tried to override the style provided by material ui using css this is the js file

import TextField from '@material-ui/core/TextField';
import classes from './InputFields.module.css';
export const InputFields = (props) => {
    return (
        <div  className={classes.fields}>
              <TextField 
                    id={props.id}
                    className={classes.field}
                    label={props.label}
                    variant="outlined"
                    type={props.type}
                    onChange={props.onChange}
                    value={props.value}
                    error={props.error}
                   required
                     /> 
        </div>
    )
}
export default InputFields

and this is the css file

.fields {
   margin: 1rem;
}
.field .MuiInputBase-input{
  height: 3rem;
  border: 5px solid green;
  border-radius: 3px;
  font-size: large;
}

any help will be appreciated

just add an "!important" tag at the end of the css command they should work fine as CSS is top down, it will render the latest style from yours. — SARAN SURYA
– SARAN SURYA, Commented Feb 7, 2021 at 15:44

Dinesh s · Accepted Answer · 2021-02-07 15:43:44Z

1

Add important key word to a css

.fields {
    margin: 1rem !imporant;
}

Add important key word to a css where you wnat to override it will override the predefined css

answered Feb 7, 2021 at 15:43

Dinesh s

3774 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zaina Over a year ago

I added in field class but it does not change anything

Dinesh s Over a year ago

oh okay then check this doc to over write material-ui.com/customization/components/…

lissettdm · Accepted Answer · 2021-02-07 17:39:34Z

0

I don't recommend you to use !important, at least it be necessary:

You need to apply some changes in your css definition to define a selector with a hight level of priority (https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity). In this case you can use input type selector, it has more priority than the class selector:

.fields {
  margin: 1rem;
}
.field input { //--> add input selector
 height: 3rem;
 border: 5px solid green;
 border-radius: 3px;
 font-size: large;
}

See: https://codesandbox.io/s/material-demo-forked-ko3kl

edited Feb 7, 2021 at 17:39

answered Feb 7, 2021 at 16:30

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

Comments

ram · Accepted Answer · 2021-02-07 18:56:41Z

0

You can create a custom TextField component with customized input props.

const useStyles = makeStyles(() =>
  createStyles({
    root: {
      height: "3rem",
      border: "5px solid green",
      borderRadius: 3,
      fontSize: "large"
    }
  }),
);

function MyTextField(props: TextFieldProps) {
  const classes = useStyles();

  return (
    <TextField
      variant="outlined"
      InputProps={{ classes } as Partial<OutlinedInputProps>}
      {...props}
    />
  );
}

This is based on 'RedditTextField' example on materialui's customized input documentation here.

answered Feb 7, 2021 at 18:56

ram

1

Collectives™ on Stack Overflow

how to override material ui css using css (reactjs)?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related