如何使用cssreactjs覆盖材料ui css？

问题描述

我尝试使用 css 覆盖 material ui 提供的样式 这是js文件

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

这是css文件

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

任何帮助将不胜感激

解决方法

在css中添加重要的关键字

.fields {
    margin: 1rem !imporant;
}

将重要的关键字添加到您希望覆盖的 css 中，将覆盖预定义的 css

,

我不建议您使用 !important，至少有必要：

您需要在 css 定义中应用一些更改来定义具有高优先级 (https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) 的 selector。在这种情况下，您可以使用 input 类型选择器，它比 class selector 具有更高的优先级：

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

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

,

您可以使用自定义输入道具创建自定义 TextField 组件。

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}
    />
  );
}

这是基于 materialui 自定义输入文档 here 上的“RedditTextField”示例。