我正在使用React Material-UI庫，并且想有條件地覆蓋文本字段的錯誤顏色。當錯誤屬于某種類型時，我需要將 helperText、邊框、文本和所需標記顏色更改為黃色。像這樣的東西：否則，我想為所有其他類型的錯誤保留默認顏色（紅色）。我嘗試遵循此codesandbox中使用的相同原則，但我無法掌握需要更改的所有組件，并且important幾乎每次都必須使用關鍵字才能看到差異。我已經設法有條件地改變類似的顏色helperText： <TextField label="Name" className={formClasses.textField} margin="normal" variant="outlined" required error={!!errors} helperText={errors && "Incorrect entry."} FormHelperTextProps={{classes: {root: getColorType(AnErrorType)}}} />將getColorType返回一個 CSS 對象，其屬性 color 設置為與給定錯誤類型相對應的顏色。前任：hardRequiredHintText: { color: `${theme.palette.warning.light} !important`},是否有更簡單的方法來覆蓋 MUI 錯誤顏色并查看它反映在所有使用它的組件中？
1 回答
互換的青春
TA貢獻1797條經驗 獲得超6個贊
對于每種類型的驗證，顯示不同的顏色，我們可以將參數傳遞給makeStyles
import { makeStyles } from "@material-ui/core/styles";
const useStyles = params =>
makeStyles(theme => ({
root: {
}
}));
const Component = () => {
const classes = useStyles(someParams)();
完整代碼：
import React from "react";
import "./styles.css";
import { TextField } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = value =>
makeStyles(theme => ({
root: {
"& .Mui-error": {
color: acquireValidationColor(value)
},
"& .MuiFormHelperText-root": {
color: acquireValidationColor(value)
}
}
}));
const acquireValidationColor = message => {
switch (message) {
case "Incorrect entry":
return "green";
case "Please input":
return "orange";
default:
return "black";
}
};
const ValidationTextField = ({ helperText }) => {
const classes = useStyles(helperText)();
return (
<TextField
label="Name"
margin="normal"
variant="outlined"
required
error={helperText !== ""}
helperText={helperText}
className={classes.root}
/>
);
};
export default function App() {
const data = ["Incorrect entry", "Please input", ""];
return (
<div className="App">
{data.map((x, idx) => (
<ValidationTextField helperText={x} key={idx} />
))}
</div>
);
}
- 1 回答
- 0 關注
- 193 瀏覽
添加回答
舉報
0/150
提交
取消