![](/img/trans.png)
[英]Unable to change border color when focused and not focused of Material UI Input
[英]Material ui Select change background and focused color
我想將 select 組件“灰色”和 label 的背景顏色和邊框顏色從藍色更改為另一種顏色,當我單擊 Z99938282F04071859941E18F16EFCF4 中的 Z99938282F04071859941E18F16EFCF4 時出現
我得到了 tis 錯誤: TS2322: Type '{ root: string; }' 不可分配給類型 'Partial<SelectClasses>'。
Object 字面量只能指定已知屬性,並且在“Partial<SelectClasses>”類型中不存在“root”。
import * as React from 'react';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import makeStyles from '@mui/styles/makeStyles';
const useStyles = makeStyles((theme) => ({
selectRoot: {
'&:focus':{
backgroundColor:'yellow'
}
}
}));
export interface SelectProps {
label: string;
value:string | undefined;
options:any;
error?: boolean;
onChange?: (value: string) => void;
}
export class FormDDown extends React.Component<SelectProps, {
value: string;
}> {
constructor(props: SelectProps) {
super(props);
this.state = {value: ''};
}
private handleChange = (event: SelectChangeEvent) => {
this.setState({value: event.target.value});
// notify the callback if present
this.props.onChange?.(event.target.value);
}
classes = useStyles();
render() {
let id = this.props.value ?? this.props.label;
let errorBorder = { borderBottom: '2px solid red' };
return(
<div className='forminput'>
<FormControl variant="filled" fullWidth>
<InputLabel id="demo-simple-select-helper-label">{this.props.label}</InputLabel>
<Select
variant="filled"
labelId="demo-simple-select-helper-label"
id="demo-simple-select-helper"
value={this.props.value}
autoWidth
onChange={this.handleChange}
style={{...(this.props.error ? errorBorder : {})}}
classes={{ root: this.classes.selectRoot }}
>
{this.props.options.map((option:any) => {
return (
<MenuItem key={option.value} value={option.label}>
{option.label ?? option.value}
</MenuItem>
);
})}
</Select>
</FormControl>
</div>
)
}
}
您遇到的問題是因為使用useStyles()
! 您不能在 class 組件中使用classes = useStyles()
。 它是一個用於功能組件的hook
。 相反,您應該使用高階組件 API 。 這是基於您要尋找的樣本:
import * as React from "react";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select, {
SelectChangeEvent,
} from "@mui/material/Select";
import { WithStyles, withStyles } from "@mui/styles";
const styles = {
root: {
color: "white !important",
background: "red !important",
border: "1px solid yellow !important"
}
};
export interface SelectProps {
label: string;
value: string | undefined;
options: any;
error?: boolean;
className: string | undefined;
onChange?: (value: string) => void;
}
class FormDDown extends React.Component<
SelectProps,
{
value: string;
}
> {
constructor(props: SelectProps) {
super(props);
this.state = { value: "" };
}
private handleChange = (event: SelectChangeEvent) => {
this.setState({ value: event.target.value });
// notify the callback if present
this.props.onChange?.(event.target.value);
};
// this.classes = useStyles();
render() {
let id = this.props.value ?? this.props.label;
let errorBorder = { borderBottom: "2px solid red" };
return (
<div className="forminput">
<FormControl variant="filled" fullWidth>
<InputLabel id="demo-simple-select-helper-label">
{this.props.label}
</InputLabel>
<Select
variant="filled"
labelId="demo-simple-select-helper-label"
id="demo-simple-select-helper"
value={this.props.value}
autoWidth
onChange={this.handleChange}
style={{ ...(this.props.error ? errorBorder : {}) }}
className={this.props.className}
>
{this.props.options.map((option: any) => {
return (
<MenuItem key={option.value} value={option.label}>
{option.label ?? option.value}
</MenuItem>
);
})}
</Select>
</FormControl>
</div>
);
}
}
function FormDDownComponent(props: WithStyles<typeof styles>) {
const { classes } = props;
return (
<FormDDown
options={[
{ value: "single", label: "Single" },
{ value: "married", label: "Married" }
]}
label="Family"
value="0"
className={classes.root}
/>
);
}
export default withStyles(styles)(FormDDownComponent);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.