CODEWITHSUNDEEP
javascriptcssreactjscss-modules
Zaina
Zaina

Reputation: 1

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

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

Upvotes: 0

Views: 691

Answers (3)

ram
ram

Reputation: 1

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.

Upvotes: 0

lissettdm
lissettdm

Reputation: 13080

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

Upvotes: 0

Dinesh s
Dinesh s

Reputation: 377

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

Upvotes: 1

Related Questions