Я использую React Material-UI
библиотеку и хочу условно переопределить цвет ошибки TextField.
Мне нужно изменить helperText, border, text и требуемый цвет маркера на желтый, когда ошибка имеет определенный тип. Что-то вроде того :
В противном случае я хочу оставить цвет по умолчанию (красный) для всех остальных типов ошибок. Я пытался следовать тому же принципу, который использовался в этом коде и коробке, но я не мог охватить все компоненты, которые мне нужно было изменить, и мне приходилось использовать 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 с набором цвета свойства к тому , которая соответствует данному типу ошибки. например:
hardRequiredHintText: {
color: `${theme.palette.warning.light} !important`
},
Есть ли более простой способ переопределить цвет ошибки MUI и увидеть его во всех компонентах, которые его используют?
Для каждого типа проверки, отображать свой цвет, мы можем передать параметры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>
);
}
Эта статья взята из Интернета, укажите источник при перепечатке.
Если есть какие-либо нарушения, пожалуйста, свяжитесь с[email protected] Удалить.
я говорю два предложения